CSS3 배경
CSS3 배경(Background)
CSS3에서는 배경의 크기뿐만 아니라 위치까지도 마음대로 설정할 수 있습니다.
또한, 하나의 HTML 요소에 여러 개의 배경 이미지를 적용할 수도 있습니다.
CSS3에서 새롭게 추가된 background 속성은 다음과 같습니다.
1. background-size
2. background-origin
3. background-clip
CSS2 배경
background 속성은 HTML 요소의 배경에 다양한 효과를 줄 수 있게 해줍니다.
CSS2까지는 다음과 같은 background 속성만을 사용할 수 있었습니다.
1. background-color
2. background-image
3. background-repeat
4. background-position
5. background-attachment
CSS3 배경(background) 속성 지원 버전
CSS3 배경(background) 속성을 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다.
또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했습니다.
| 속성 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| background-size | 9.0 |
4.0 1.0 -webkit- |
4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
| background-origin | 9.0 | 1.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 9.0 | 4.0 | 4.0 | 3.0 | 10.5 |
| 여러 개의 배경 이미지 | 9.0 | 4.0 | 3.6 | 3.1 | 11.5 |
background-size 속성
background-size 속성은 배경 이미지의 크기를 설정합니다.
CSS2에서 배경 이미지의 크기란 배경 이미지로 사용되는 이미지의 실제 크기와 같았습니다.
하지만 CSS3에서는 배경 이미지의 크기를 마음대로 설정할 수 있습니다.
background-size 속성의 문법은 다음과 같습니다.
문법
background-size: 너비 높이 contain|cover ;
배경 이미지의 너비와 높이를 명시할 때는 CSS 크기 단위를 사용합니다.
CSS 크기 단위에는 픽셀 단위(px), 배수 단위(em), 백분율 단위(%) 등이 있습니다.
예제
<style>
#origin { background: url(/examples/images/img_monitor.png); background-repeat: no-repeat; }
#resize {
background: url(/examples/images/img_monitor.png);
background-size: 200px 110px;
background-repeat: no-repeat;
}
</style>
background-size 속성값은 contain과 cover 중에서 선택할 수 있습니다.
속성값을 contain으로 설정하면 이미지의 비율은 유지하면서, 크기를 가능한 한 크게 조절합니다.
단, 배경 이미지의 크기가 해당 요소의 내용(content) 영역을 넘지는 않습니다.
따라서 배경 이미지의 크기가 해당 요소의 크기보다 항상 작거나 같게 되며, 배경 이미지가 요소의 일부분은 가리지 못할 수도 있습니다.
속성값을 cover로 설정하면 이미지의 비율은 유지하면서, 요소의 모든 영역을 가리도록 크기를 조절합니다.
따라서 배경 이미지의 크기가 해당 요소의 크기보다 항상 크거나 같게 되며, 배경 이미지의 일부분이 잘릴 수도 있습니다.
다음 예제는 background-size 속성값에 따른 차이점을 보여주는 예제입니다.
예제
<style>
#contain { background-size: contain; }
#cover { background-size: cover; }
</style>
background-size 속성을 사용하여 이미지의 비율을 유지하지 않고, 해당 요소의 전부를 가리도록 설정할 수도 있습니다.
예제
<style>
html { background: url(/examples/images/img_flower.png) no-repeat center fixed; background-size: cover; }
</style>
background-origin 속성
background-origin 속성은 배경 이미지의 위치를 결정할 기준을 설정합니다.
이 속성은 다음과 같이 세 가지 속성값을 사용할 수 있습니다.
1. border-box : 배경 이미지를 테두리(border) 영역의 왼쪽 위에 맞춥니다.
2. padding-box : 기본 설정이며, 배경 이미지를 패딩(padding) 영역의 왼쪽 위에 맞춥니다.
3. content-box : 배경 이미지를 내용(content) 영역의 왼쪽 위에 맞춥니다.
다음 예제는 background-origin 속성값에 따른 차이점을 보여주는 예제입니다.
예제
<style>
#border { background-origin: border-box; }
#content { background-origin: content-box; }
</style>
background-clip 속성
background-clip 속성은 해당 요소의 배경을 어느 영역까지 설정할지를 결정합니다.
이 속성은 다음과 같이 세 가지 속성값을 사용할 수 있습니다.
1. border-box : 기본 설정이며, 배경을 테두리(border) 영역의 끝부분까지 설정합니다.
2. padding-box : 배경을 패딩(padding) 영역의 끝부분까지 설정합니다.
3. content-box : 배경을 내용(content) 영역까지만 설정합니다.
다음 예제는 background-clip 속성값에 따른 차이점을 보여주는 예제입니다.
예제
<style>
#padding { background-clip: padding-box; }
#content { background-clip: content-box; }
</style>
여러 개의 배경 이미지 설정
background-image 속성을 사용하면 하나의 요소에 여러 개의 배경 이미지를 설정할 수 있습니다.
각각의 배경 이미지는 쉼표(,)로 구분되며, 스택(stack)처럼 차례대로 쌓이게 됩니다.
배경 이미지들 간의 순서는 가장 처음 명시된 이미지가 가장 위에 나타납니다.
즉 가장 나중에 명시된 이미지가 가장 아래쪽에 위치하게 됩니다.
다음 예제는 background-image 속성을 이용하여 여러 개의 배경 이미지를 설정하는 예제입니다.
예제
<style>
#origin {
background-image: url(/examples/images/img_man.png), url(/examples/images/img_background_good.png);
background-position: right top, left;
background-repeat: no-repeat, repeat;
background-size: 100px 233px, auto;
}
</style>
CSS3 background 속성
| 속성 | 설명 |
|---|---|
| background | 모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있음. |
| background-size | 배경 이미지의 크기를 설정함. |
| background-origin | 배경 이미지의 위치를 결정할 기준을 설정함. |
| background-clip | 해당 요소의 배경을 어느 영역까지로 설정할지를 결정함. |
| background-image | 하나의 요소에 여러 개의 배경 이미지를 설정함. |
