CSS 입문 | CSS 기본 속성 | CSS 배경 (background)

웹 페이지뿐만 아니라 HTML 요소는 모두 각자의 배경을 가지고 있다.
CSS의 background 속성은 이러한 각 요소의 배경에 다양한 효과를 줄 수 있게 해준다.

CSS background 속성

background-color 속성

background-color 속성은 해당 HTML 요소의 배경색(background color)을 설정한다.

<style>
    body { background-color: lightblue; }
    h1 { background-color: rgb(255,128,0); }
    p { background-color: #FFFFCC; }
</style>

background-image 속성

background-image 속성은 해당 HTML 요소의 배경으로 나타날 배경 이미지(image)를 설정한다.
설정된 배경 이미지는 기본 설정으로 HTML 요소 전체에 걸쳐 반복되어 나타낸다.

<style>
    body { background-image: url("/examples/images/img_background_good.png"); }
</style>

background-repeat 속성

배경 이미지는 기본 설정으로 수평과 수직 방향으로 모두 반복되어 나타낸다.
background-repeat 속성을 이용하면 이러한 배경 이미지를 수평이나 수직 방향으로만 반복되도록 설정할 수 있다.

다음 예제는 배경 이미지의 수평 반복을 보여준다.

<style>
    body { background-image: url("/examples/images/img_man.png"); background-repeat: repeat-x; }
</style>

다음 예제는 배경 이미지의 수직 반복을 보여준다.

<style>
    body { background-image: url("/examples/images/img_man.png"); background-repeat: repeat-y; }
</style>

배경 이미지가 반복되지 않고 한 번만 나타나게 할 수도 있다.

<style>
    body { background-image: url("/examples/images/img_man.png"); background-repeat: no-repeat; }
</style>

background-position 속성

background-position 속성은 반복되지 않는 배경 이미지의 상대 위치(relative position)를 설정한다.

<style>
    body {
        background-image: url("/examples/images/img_man.png");
        background-repeat: no-repeat;
        background-position: top right;
    }
</style>

이 속성에서 사용할 수 있는 키워드의 조합은 다음과 같다.

1. left top
2. left top
3. left center
4. left bottom
5. right top
6. right center
7. right bottom
8. center top
9. center center
10. center bottom

또한, 퍼센트(%)나 픽셀(px)을 사용하여 상대 위치를 직접 명시할 수도 있다.
이때 상대 위치를 결정하는 기준은 해당 요소의 왼쪽 상단(left top)이 된다.

다음 예제는 배경 이미지의 상대 위치를 픽셀 단위로 직접 명시한 예제이다.

<style>
    body {
        background-image: url("/examples/images/img_man.png");
        background-repeat: no-repeat;
        background-position: 100px 200px;
    }
</style>

background-attachment 속성

background-attachment 속성을 사용하여 위치가 설정된 배경 이미지를 해당 위치에 고정시킬 수도 있다.
이렇게 고정된 배경 이미지는 스크롤과는 무관하게 화면의 위치에서 이동하지 않는다.

<style>
    body {
        background-image: url("/examples/images/img_man.png");
        background-repeat: no-repeat;
        background-position: left bottom;
        background-attachment: fixed;
    }
</style>

background 속성 한 번에 적용하기

위에서 언급한 모든 background 속성을 이용한 스타일을 한 줄에 설정할 수 있다.

<style>
    body { background: #FFCCCC url("/examples/images/img_man.png") no-repeat left bottom fixed; }
</style>

CSS3 배경

CSS3에서는 배경의 크기뿐만 아니라 위치까지도 마음대로 설정할 수 있다.
또한, 하나의 HTML 요소에 여러 개의 배경 이미지를 적용할 수도 있다.

CSS3에서 새롭게 추가된 background 속성은 다음과 같다.

CSS3 배경(background) 속성 지원 버전

CSS3 배경(background) 속성을 지원하는 주요 웹 브라우저의 버전은 다음과 같다.
또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했다.

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 속성 - 여러 개의 배경 이미지 설정

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>