[CSS] background 와 background-color의 차이점

 

결론 적으로 background와  background-color 모두 배경 색상을 지정할 수 있다.

다만  background-color은  background  의 속성 중 하나이다.  background-color 는 색깔만 지정할 수 있는 반면,  background 는 color 이외의 다른 background 옵션들까지 지정해줄 수있다.

 

color

• 글씨 색깔

 

background

• 다양한 백그라운드 속성을 부여할 수 있다.

 

 

background 속성

background-color: color | transparent | initial | inherit;

 

• 요소의 배경색을 설정한다.
• TIP! 요소의 배경은  padding 과  border 을 포함한 요소의 전체 크기이다. ( margin 은 포함하지 않는다.)

 

background-image: url | none | initial | inherit

 

• 백그라운드 이미지를 설정한다. 기본적으로 배경 이미지는 요소의 왼쪽 상단 모소리에 배치되고 세로 및 가로로 반복한다.
• TIP! 요소의 배경은  padding 과  border 을 포함한다. ( margin 은 포함하지 않는다.)

 

background-position: value

 

• 백그라운드 요소의 시작점을 설정한다.
• TIP! 기본적으로,  background-image 는 왼쪽 상단 코너에서 시작되고 가로 및 세로로 반복된다.

value의 종류

left top left center left bottom right top right center right bottom center top center center center bottom	하나만 적을 경우 나머지 하나는 자동의 center로 설정된다.
x% y%	x는 높이설정이고 y는 가로를 설정한다. 왼쪽 상단 코너는 0% 0%이다. 오른쪽 하단 코너는 100% 100%이다.

 

background-size: auto | length | cover | contain | initial | inherit;

 

• 백그라운드 이미지 사이즈를 설정한다.

 

background-repeat: repeat | repeat-x | repeat-y | no-repeat | initial | inherit;

 

• 백그라운드 이미지 반복 여부를 설정한다.
• 기복적으로 이미지는 가로 및 세로로 반복한다.

 

background-origin: padding-box | border-box | content-box | initial | inherit;

 

• 배경 이미지의 원점 위치 (배경 위치 지정 영역)을 지정한다.
• 이 속성은  background-attachment 가 “fixed”인 경우 효과가 없다.

 

background-clip: border-box | padding-box | content-box | initial | inherit;

 

• 요소 내에서 배경(색상 또는 이미지)이 확장되어야 하는 거리를 정의한다.

 

background-attachment: scroll | fixed | local | initial | inherit;

 

• 백그라운드 이미지 고정여부를 설정한다.

 

 

Reference

https://www.w3schools.com/cssref/css3_pr_background.asp