body {
background: white url("pendant.png");
background-repeat: repeat-y;
background-position: center;
}
하나의 배경 이미지가 중앙에 배치되고, 다른 복사본이 위아래로 추가되어 요소 뒤에 세로 띠를 만듭니다.
목차
CSS 속성을 사용하여 작성자는 요소의 전경 색상과 배경을 지정할 수 있습니다. 배경은 색상이나 이미지일 수 있습니다. 배경 속성을 통해 작성자는 배경 이미지를 배치하고, 반복 여부를 설정하며, 뷰포트에 고정할지 또는 문서와 함께 스크롤할지를 선언할 수 있습니다.
유효한 색상 값 문법은 색상 단위 섹션을 참조하십시오.
| 이름: | color |
|---|---|
| 값: | <color> | inherit |
| 초기값: | 사용자 에이전트에 따라 다름 |
| 적용 대상: | 모든 요소 |
| 상속됨: | 예 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 지정된 대로 |
이 속성은 요소 텍스트 콘텐츠의 전경 색상을 설명합니다. 빨간색을 지정하는 다양한 방법이 있습니다:
em { color: red } /* 미리 정의된 색상 이름 */
em { color: rgb(255,0,0) } /* RGB 범위 0-255 */
작성자는 요소의 배경(즉, 렌더링 표면)을 색상이나 이미지로 지정할 수 있습니다. 박스 모델의 관점에서 "배경"은 콘텐츠, 패딩, 및 테두리 영역의 배경을 의미합니다. 테두리 색상과 스타일은 테두리 속성으로 설정됩니다. 여백은 항상 투명합니다.
배경 속성은 상속되지 않지만, 'background-color'의 초기 값인 'transparent'로 인해 기본적으로 부모 박스의 배경이 비쳐 보입니다.
루트 요소의 배경은 캔버스의 배경이 되어 전체 캔버스를 덮고, ('background-position'에 대해) 루트 요소 자체에만 그려진 경우와 동일한 지점에 고정됩니다. 루트 요소는 이 배경을 다시 그리지 않습니다.
그러나 HTML 문서의 경우, 작성자는 HTML 요소보다 BODY 요소의 배경을 지정하는 것이 좋습니다. 루트 요소가 'transparent' 값의 'background-color', 'none' 값의 'background-image'를 가진 HTML "HTML" 요소 또는 XHTML "html" 요소인 문서의 경우, 사용자 에이전트는 해당 요소의 첫 번째 HTML "BODY" 요소 또는 XHTML "body" 요소 자식에서 배경 속성의 계산된 값을 사용하여 캔버스의 배경을 그려야 하며, 해당 자식 요소에 대한 배경은 그리지 않아야 합니다. 이러한 배경은 루트 요소에만 그려진 경우와 동일한 지점에 고정되어야 합니다.
그러나 배경이 캔버스의 배경으로 사용될 요소에 대해 박스가 생성되지 않는 경우, 캔버스 배경은 투명합니다. (CSS 2.2에서는 요소나 조상이 'display: none'을 가진 경우가 이에 해당합니다.)
요소가 'visibility: hidden'이지만 'display: none'이 아닌 경우, 박스는 생성되며, 해당 배경은 캔버스에 사용됩니다.
이러한 규칙에 따르면, 다음 HTML 문서의 기본 캔버스는 "marble" 배경을 갖게 됩니다:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<TITLE>캔버스 배경 설정</TITLE>
<STYLE type="text/css">
BODY { background: url("http://example.com/marble.png") }
</STYLE>
<P>내 배경은 marble입니다.
BODY 요소에 대한 규칙은 HTML 소스에서 BODY 태그가 생략되었더라도 HTML 파서가 누락된 태그를 추론하기 때문에 작동합니다.
'z-index' 속성을 참조하여 쌓임 맥락을 형성하는 요소의 배경은 해당 요소의 쌓임 맥락의 맨 아래에 그려지며, 해당 쌓임 맥락의 다른 모든 요소 아래에 위치합니다.
| 이름: | background-color |
|---|---|
| 값: | <color> | transparent | inherit |
| 초기값: | transparent |
| 적용 대상: | 모든 요소 |
| 상속됨: | 아니요 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 지정된 대로 |
이 속성은 요소의 배경색을 설정합니다. 값은 <color> 또는 'transparent' 키워드를 사용하여 배경이 비쳐 보이게 할 수 있습니다.
h1 { background-color: #F00 }
| 이름: | background-image |
|---|---|
| 값: | <uri> | none | inherit |
| 초기값: | none |
| 적용 대상: | 모든 요소 |
| 상속됨: | 아니요 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 절대 URI 또는 none |
이 속성은 요소의 배경 이미지를 설정합니다. 배경 이미지를 설정할 때, 이미지가 사용 불가능한 경우에 사용할 배경색도 지정해야 합니다. 이미지가 사용 가능한 경우, 배경색 위에 렌더링됩니다. (따라서, 이미지를 투명하게 설정하면 배경색이 보입니다).
이 속성의 값은 <uri>로 이미지를 지정하거나 'none'으로 이미지를 사용하지 않을 수 있습니다.
body { background-image: url("marble.png") }
p { background-image: none }
퍼센트로 표현된 고유 치수는 'background-position' 속성의 좌표 시스템을 설정하는 사각형의 치수를 기준으로 해석되어야 합니다.
이미지가 고유 가로 또는 세로 크기 중 하나와 고유 비율을 가지는 경우, 누락된 크기는 주어진 크기와 비율을 사용하여 계산됩니다.
이미지가 고유 가로 또는 세로 크기 중 하나만 가지고 고유 비율이 없는 경우, 누락된 크기는 'background-position' 속성의 좌표 시스템을 설정하는 사각형의 크기로 간주됩니다.
이미지가 고유 치수를 가지지 않고 고유 비율만 있는 경우, 치수는 'background-position' 속성의 좌표 시스템을 설정하는 사각형의 치수를 초과하지 않는 가장 큰 크기로 간주되어야 합니다.
이미지가 고유 비율도 가지지 않는 경우, 치수는 'background-position' 속성의 좌표 시스템을 설정하는 사각형으로 간주되어야 합니다.
| 이름: | background-repeat |
|---|---|
| 값: | repeat | repeat-x | repeat-y | no-repeat | inherit |
| 초기값: | repeat |
| 적용 대상: | 모든 요소 |
| 상속됨: | 아니요 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 지정된 대로 |
배경 이미지가 지정된 경우, 이 속성은 이미지가 반복(타일링)되는지 여부와 방법을 지정합니다. 모든 타일링은 박스의 콘텐츠, 패딩, 및 테두리 영역을 덮습니다.
인라인 요소에서 배경 이미지의 타일링 및 배치에 대한 정의는 이 명세에 포함되어 있지 않습니다. CSS의 향후 레벨에서 인라인 요소의 배경 이미지 타일링 및 배치가 정의될 수 있습니다.
값의 의미는 다음과 같습니다:
body {
background: white url("pendant.png");
background-repeat: repeat-y;
background-position: center;
}
하나의 배경 이미지가 중앙에 배치되고, 다른 복사본이 위아래로 추가되어 요소 뒤에 세로 띠를 만듭니다.
| 이름: | background-attachment |
|---|---|
| 값: | scroll | fixed | inherit |
| 초기값: | scroll |
| 적용 대상: | 모든 요소 |
| 상속됨: | 아니요 |
| 백분율: | N/A |
| 미디어: | 시각적 |
| 계산값: | 지정된 대로 |
배경 이미지가 지정된 경우, 이 속성은 이미지가 뷰포트를 기준으로 고정('fixed')되는지, 또는 포함 블록과 함께 스크롤되는지('scroll')를 지정합니다.
뷰포트는 보기당 하나만 있습니다. 요소에 스크롤 메커니즘('overflow' 참조)이 있는 경우, 'fixed' 배경은 요소와 함께 이동하지 않으며, 'scroll' 배경은 스크롤 메커니즘과 함께 이동하지 않습니다.
이미지가 고정되더라도, 콘텐츠, 패딩 또는 테두리 영역에 있을 때만 보입니다. 따라서 이미지가 타일링('background-repeat: repeat')되지 않으면 보이지 않을 수 있습니다.
뷰포트가 없는 페이지 매체에서는 'fixed' 배경이 페이지 박스를 기준으로 고정되므로 모든 페이지에 복제됩니다.
이 예제는 요소가 스크롤될 때 뷰포트에 "고정"된 무한 세로 띠를 생성합니다.
body {
background: red url("pendant.png");
background-repeat: repeat-y;
background-attachment: fixed;
}
'fixed' 배경을 지원하지 않는 사용자 에이전트(예: 하드웨어 플랫폼의 제한으로 인해)는 'fixed' 키워드가 포함된 선언을 무시해야 합니다. 예를 들어:
body {
background: white url(paper.png) scroll; /* 모든 사용자 에이전트를 위한 설정 */
background: white url(ledger.png) fixed; /* 'fixed' 배경을 지원하는 사용자 에이전트를 위한 설정 */
}
자세한 내용은 준수 섹션을 참조하십시오.
| 이름: | background-position |
|---|---|
| 값: | [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit |
| 초기값: | 0% 0% |
| 적용 대상: | 모든 요소 |
| 상속됨: | 아니요 |
| 백분율: | 박스 자체 크기 기준 |
| 미디어: | 시각적 |
| 계산값: | <length>에 대해 절대값, 그렇지 않으면 백분율 |
배경 이미지가 지정된 경우, 이 속성은 초기 위치를 지정합니다. 값이 하나만 지정된 경우 두 번째 값은 'center'로 간주됩니다. 값 중 적어도 하나가 키워드가 아닌 경우 첫 번째 값은 수평 위치를 나타내고 두 번째 값은 수직 위치를 나타냅니다. 음수 <percentage> 및 <length> 값도 허용됩니다.
그러나 이미지가 고유 비율은 있지만 고유 크기가 없는 경우, CSS 2.2에서 위치는 정의되지 않습니다.
body { background: url("banner.jpeg") right top } /* 100% 0% */
body { background: url("banner.jpeg") top center } /* 50% 0% */
body { background: url("banner.jpeg") center } /* 50% 50% */
body { background: url("banner.jpeg") bottom } /* 50% 100% */
인라인 요소에서 배경 이미지의 타일링 및 배치에 대한 정의는 이 명세에 포함되어 있지 않습니다. CSS의 향후 레벨에서 인라인 요소의 배경 이미지 타일링 및 배치가 정의될 수 있습니다.
배경 이미지가 뷰포트 내에 고정된 경우( 속성 참조), 이미지는 요소의 패딩 박스 대신 뷰포트를 기준으로 배치됩니다. 예를 들어,
body {
background-image: url("logo.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}
위 예제에서는 이미지가 뷰포트의 오른쪽 하단 모서리에 배치됩니다.
| 이름: | background |
|---|---|
| 값: | [<'background-color'> || <'background-image'> || <'background-repeat'> || || <'background-position'>] | inherit |
| 초기값: | 개별 속성 참조 |
| 적용 대상: | 모든 요소 |
| 상속됨: | 아니요 |
| 백분율: | 'background-position'에서 허용됨 |
| 미디어: | 시각적 |
| 계산값: | 개별 속성 참조 |
'background' 속성은 개별 배경 속성(즉, 'background-color', 'background-image', 'background-repeat', 및 'background-position')을 스타일 시트에서 한 번에 설정하는 약식 속성입니다.
유효한 선언이 주어진 경우, 'background' 속성은 먼저 모든 개별 배경 속성을 초기값으로 설정한 다음, 선언에서 지정된 값을 할당합니다.
다음 예제의 첫 번째 규칙에서는 'background-color'에 대한 값만 지정되었으며, 다른 개별 속성은 초기값으로 설정됩니다. 두 번째 규칙에서는 모든 개별 속성이 지정되었습니다.
BODY { background: red }
P { background: url("chess.png") gray 50% repeat fixed }