background
속성의 이해
background
속성은
요소의 배경 스타일을 한 번에 지정하는 단축 속성(shorthand property)입니다.
이 속성으로 색상, 이미지, 이미지의 영역과 위치 및 반복 여부 등과 같은 배경 스타일을 한 번에 지정할 수 있습니다.
구성 속성
background
속성은 다음의 CSS 속성들을 한 번에 지정할 수 있는 단축 속성(shorthand property)입니다.
background-attachment
|
요소에 적용한 배경 이미지가 어느 기준에 부착(attachment)될지를 지정합니다. |
---|---|
background-clip
|
요소의 배경(색상이나 이미지)이 어느 부분까지 차지할 지를 지정합니다. |
background-color
|
요소의 배경 색상을 지정합니다. |
background-image
|
요소의 배경 이미지를 지정합니다. |
background-origin
|
요소 박스의 배경 이미지를 어느 영역을 기준으로 포지셔닝할지 설정합니다. |
background-position
|
요소에 적용한 배경 이미지가 어디서부터 시작될지 위치를 지정합니다. |
background-repeat
|
요소에 적용한 배경 이미지의 반복 방식을 지정합니다. |
background-size
|
요소에 적용한 배경 이미지의 크기를 지정합니다. |
background
속성의 형식은 다음과 같습니다.
형식 구문
구문
주요 포인트 설명
구문에 관련된 주요한 형식에 대한 설명을 첨부합니다.
<background-position>
과 <background-size>
의 관계
background
속성에서<background-position>
이 먼저 오고 그 뒤에<background-size>
가 와야 합니다. 이 순서는 반드시 지켜야 합니다.- 두 값 예시:
center top
,left bottom
처럼 수평 위치와 수직 위치를 각각 따로 지정할 수 있습니다. 첫 번째 값이 수평 위치, 두 번째 값이 수직 위치입니다. - 네 값 예시:
<background-position>
에 네 개의 값을 사용하여 수평 위치, 수직 위치, 크기(너비, 높이)를 동시에 지정할 수 있습니다. 예를 들어,left top / 100px 200px
처럼 배경 이미지의 위치와 크기를 함께 설정하는 방식입니다.left top/100px 200px
처럼/
앞 뒤의 띄어쓰기는 없거나 있거나 동일하게 작동합니다.
구성 속성들의 순서
<background-position>
과<background-size>
처럼 쌍으로 사용될 때 순서가 중요합니다.- 나머지 속성들, 예를 들어
<background-color>
,<background-image>
,<background-repeat>
등은 순서를 변경해도 상관없습니다.
값
<background-color> |
background-color 속성 값 |
---|---|
<background-image> |
background-image 속성 값 |
<background-repeat> |
background-repeat 속성 값 |
<background-position> |
background-position 속성 값 |
<background-size> |
background-size 속성 값 |
<background-attachment> |
background-attachment 속성 값 |
<background-origin> |
background-origin 속성 값 |
<background-clip> |
background-clip 속성 값 |
형식 정의
초깃값 |
|
---|---|
적용 요소 | 모든 요소 |
상속 | 아니오 |
주의할 점
background
속성은 단축 속성(shorthand property)이기 때문에, 이 속성에 값을 새로 지정하면 기존에 지정한 개별 배경 속성들이 모두 덮어씌워집니다.
즉, background
속성을 사용하여 배경 스타일을 한 번에 지정하면, 각 구성 요소에 대해 개별적으로 설정한 값들도 초기화되어 새로운 값으로만 설정됩니다.
예제를 통해 살펴보겠습니다.
배경 이미지와 배경 색상이 변경될 때, background
속성으로 전체를 다시 지정하면, 기존의 배경 이미지와 기존의 배경 색상 등은 초기화(초깃값으로 지정)되므로 다른 속성값이 덮어쓰여집니다. 마우스를 올리면 배경이 빨간색으로 바뀝니다. 이때 background
속성이 다시 지정되므로, 기존 배경에 설정된 이미지와 크기, 색상은 모두 초기화되고 빨간색 배경만 적용됩니다.
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
background
|
예 | 예 | 예 | 예 |
명세서
명세서 사양 | |
---|---|
background
|
CSS Backgrounds and Borders Module Level 3 #the-background |
참고문헌
같이 보기
- CSS background-color 속성 – 요소의 배경색 지정
- CSS background-image 속성 – 요소의 배경 이미지 지정
- CSS background-repeat 속성 – 배경 이미지의 반복 방식 지정
- CSS background-position 속성 – 배경 이미지의 시작 위치 지정
- CSS background-size 속성 – 배경 이미지의 크기 지정
- CSS background-attachment 속성 – 배경 이미지의 부착 기준 지정
- CSS background-clip 속성 – 요소의 배경이 어디까지 차지할 지 설정
- CSS background-origin 속성 – 배경 이미지의 포지셔닝 기준 영역 설정