CSS 배경 모듈 레벨 4

1. 소개

요소가 CSS 박스 모델 [CSS-BOX-3]에 따라 렌더링될 때, 각 요소는 아예 표시되지 않거나, 하나 이상의 직사각형 박스로 포맷됩니다. 각 박스는 직사각형의 콘텐츠 영역과, 콘텐츠 주변의 패딩 띠, 패딩을 감싸는 테두리, 그리고 테두리 바깥의 마진을 가집니다. (마진은 음수일 수도 있지만, 마진은 배경 및 테두리에 영향을 주지 않습니다.)

이 모듈의 속성은 콘텐츠, 패딩, 테두리 영역의 배경을 다룹니다.

요소가 여러 박스 조각으로 분할되는 경우, box-decoration-break가 여러 조각에 경계선과 배경이 어떻게 나눠지는지 정의합니다. (요소가 줄 끝, 칼럼 끝, 페이지 끝에서 나뉘면 한 개 이상의 조각이 만들어지고, 다음 줄, 칼럼, 페이지로 이어집니다.)

배경, 테두리, 그림자의 상대적인 쌓임 순서는 이 모듈에서 명시되어 있습니다. 이러한 레이어가 다른 렌더링된 콘텐츠와 어떻게 상호작용하는지에 대해서는 [CSS2]의 부록 E "쌓임 맥락의 상세 설명"을 참고하십시오.

1.1. 모듈 상호작용

이 명세는 CSS Backgrounds and Borders Module Level 3 [CSS3BG]의 배경 관련 부분을 확장합니다.

추가된 background-repeat-* 및 `background-position-*' 롱핸드, 배경 레이어(컬러 제외)를 정의할 수 있는 새로운 background-tbd 속성, 그리고 background-clip에 2개의 새로운 값을 명세합니다.

이 모듈의 모든 속성은 ::first-letter 및 ::first-line 가상 요소에 적용됩니다.

1.2. 값 정의

이 명세는 CSS 속성 정의 관례를 [CSS2]에서 따르며 값 정의 문법은 [CSS-VALUES-3]을 사용합니다. 이 명세에 정의되지 않은 값 타입은 CSS Values & Units [CSS-VALUES-3]에서 정의됩니다. 다른 CSS 모듈과 결합하면 이러한 값 타입 정의가 확장될 수 있습니다. 예를 들어 CSS Images와 조합하면 CSS 그라디언트를 background-image 또는 border-image 값으로 사용할 수 있습니다. [CSS-IMAGES-3]

각 속성 정의에 명시된 속성별 값 이외에도, 이 명세에서 정의된 모든 속성은 CSS 전체 키워드(CSS-wide keywords)도 속성값으로 허용합니다. 가독성을 위해 본문에서 반복적으로 명시하지는 않았습니다.

2. 배경 정의

각 박스는 완전히 투명할 수도 있고(기본값), 색상, 하나 이상의 이미지를 채울 수 있는 배경 레이어를 가집니다. 배경 속성들은 어떤 색상(background-color) 그리고 어떤 이미지(background-image)를 사용할지, 그리고 그것을 어떻게 크기, 위치, 타일링 등 할지 지정합니다.

배경 속성은 상속되지 않지만, 기본적으로 상위 박스의 배경이 transparent라는 초깃값 때문에 부모 박스의 배경이 비쳐 보이게 됩니다. (background-color)

2.1. 기본 색상: background-color 속성

이 속성은 박스의 배경 색상을 설정합니다. 이 색상은 모든 배경 이미지 뒤에 렌더링됩니다.

h1 { background-color: #F00 } /* 배경을 빨간색으로 설정합니다. */

배경 색상은 최하단 background-clip 값에 따라 배경 이미지 레이어의 영역에 맞게 잘립니다.

2.2. 이미지 소스: background-image 속성

이 속성은 요소의 배경 이미지를 지정합니다. 이미지는 명시된 첫 번째 것이 위(사용자에게 가장 가까이)부터 그려지고, 그 다음 이미지는 이전 이미지의 뒤에 배치됩니다. 이 속성 값은 <bg-image> 값의 콤마(,)로 구분된 목록으로 제공됩니다.

<bg-image> = <image> | none

none 값은 배경 이미지 레이어로 처리되지만 아무 것도 그리지 않습니다. 이미지가 비어있거나(너비 또는 높이 0), 다운로드에 실패하거나, 지원하지 않는 포맷 등으로 표시할 수 없는 경우 역시 레이어로 취급되지만 아무 것도 그려지지 않습니다.

§ 3 여러 개의 배경 이미지 레이어링에서 background-image가 다른 콤마(,)로 구분된 배경 속성과 상호작용해 각 배경 이미지 레이어를 형성하는 방식을 확인할 수 있습니다.

배경 이미지를 설정할 때, 저자는 이미지가 없는 경우에도 텍스트 대비를 보장하도록 background-color도 지정해야 합니다.

접근성(accessibility) 측면에서, 중요한 정보를 전달하는 유일한 수단으로 배경 이미지를 사용해서는 안 됩니다. 웹 콘텐츠 접근성 가이드라인 F3 [WCAG20]을 참고하세요. 이미지는 비그래픽 프레젠테이션에서 접근할 수 없으며, 특히 배경 이미지는 고대비(High-contrast) 모드에서 꺼질 수 있습니다.

참고: 스타일용 전경 이미지는 CSS content 속성으로 제공할 수 있습니다. 의미적으로 중요한 전경 이미지는 문서 마크업(예: HTML의 <img> 태그)으로 제공해야 합니다.

참고: 미디어 프래그먼트를 사용하여 이미지의 일부만 표시할 수 있습니다. CSS Images 모듈은 이미지 포맷에 대한 폴백 구문(fallback syntax)과 추가적인 이미지 표시 제어를 제공합니다.

html { background-image: url("marble.svg") }
p { background-image: none }
div { background-image: url(tl.png), url(tr.png) }
main { background-image: radial-gradient(at bottom right, transparent, white); }

구현체는 보이지 않는(예: 다른 완전히 불투명한 이미지 뒤에 있는) 이미지는 다운로드하거나 그리지 않도록 최적화할 수 있습니다.

2.3. 이미지 타일링: background-repeat-x, background-repeat-y, background-repeat-block, background-repeat-inline 속성

<repetition> = repeat | space | round | no-repeat

이 속성들은 배경 이미지가 크기 조정과 위치 지정 이후, 한 방향으로 타일링(반복)될지와 그 방법을 지정합니다.

repeat

이미지는 해당 방향으로 배경 그리기 영역을 채울 때까지 반복됩니다.

space

이미지는 잘리지 않고 배경 위치 지정 영역 안에 최대한 많이 반복됩니다. 그리고 반복된 이미지들은 영역을 채우도록 간격을 두고 배치됩니다. 첫 번째, 마지막 이미지는 영역의 끝에 맞닿습니다. 배경 그리기 영역이 위치 지정 영역보다 크면 패턴이 그리기 영역 전체를 채웁니다. 이 방향의 background-position 속성 값은 무시됩니다. 단, 이 방향에 이미지 두 개를 넣을 공간이 없으면 이미지 한 개만 배치되고, 위치는 background-position이 정합니다.

round

이미지는 배경 위치 지정 영역에 딱 맞을 때까지 반복됩니다. 만약 반복횟수가 정수가 아니면 이미지가 리스케일됩니다. 자세한 공식은 background-size를 참고하세요. 배경 그리기 영역이 위치 지정 영역보다 크면, 패턴이 그리기 영역 전체를 채웁니다.

no-repeat

이미지는 해당 방향에 한 번만 배치되고 반복되지 않습니다.

한 축이라도 no-repeat로 지정되지 않는 한 배경 전체 영역이 타일링됩니다. 즉, 한 줄 또는 한 칸만 채우는 설정이 아닙니다.

예시:

body {
  background: white url("pendant.png");
  background-repeat-y: repeat;
  background-position: center;
}

§ 3 여러 개의 배경 이미지 레이어링 절을 참고하여 background-repeat-x, background-repeat-y, background-repeat-block, background-repeat-inline이 서로 다른 콤마(,) 구분 배경 속성과 상호작용하여 각 배경 이미지 레이어를 구성하는 방법을 확인하세요.

2.4. 이미지 타일링 약식: background-repeat 속성

이 속기 속성은 background-repeat-x 및 background-repeat-y 롱핸드 속성의 값을 설정합니다.

<repeat-style> = repeat-x | repeat-y | repeat-block | repeat-inline | <repetition>{1,2}

<repeat-style>에 대한 단일 값의 의미는 다음과 같습니다:

repeat-x

repeat no-repeat로 계산됩니다.

repeat-y

no-repeat repeat로 계산됩니다.

repeat-block

repeat가 블록 축에서는 적용되고, no-repeat가 인라인 축에서는 적용됩니다.

repeat-inline

repeat가 인라인 축에서는 적용되고, no-repeat가 블록 축에서는 적용됩니다.

repeat

repeat repeat로 계산됩니다.

space

space space로 계산됩니다.

round

round round로 계산됩니다.

no-repeat

no-repeat no-repeat로 계산됩니다.

<repeat-style> 값에 키워드가 두 개 있을 때, 첫 번째는 수평 방향, 두 번째는 수직 방향에 적용됩니다.

예시:

body {
  background-image: url(dot.png) white;
  background-repeat: space;
}

§ 3 여러 개의 배경 이미지 레이어링 섹션에서 background-repeat가 콤마로 구분된 다른 배경 속성과 상호작용하여 각 배경 이미지 레이어를 어떻게 형성하는지 확인할 수 있습니다.

'background-repeat: extend'를 추가해야 할까요?

2.5. 이미지 부착: background-attachment 속성

만약 배경 이미지가 지정되어 있다면, 이 속성은 배경 이미지가 뷰포트에 고정되는지(fixed), 박스와 함께 스크롤되는지(scroll), 또는 그 내용물과 함께 스크롤되는지(local)를 지정합니다. 이 속성의 값은 <attachment> 키워드의 콤마로 구분된 목록으로 주어집니다.

<attachment> = scroll | fixed | local

fixed

배경은 뷰포트에 고정됩니다. 페이지 매체(paged media)처럼 뷰포트가 없는 경우에는, fixed 배경은 페이지 박스(page box)에 대해 고정되며, 모든 페이지마다 복제됩니다.

참고: 하나의 뷰(view)당 오직 하나의 뷰포트만 있습니다. 어떤 박스가 스크롤 컨테이너일지라도, fixed 배경은 박스와 함께 움직이지 않습니다.

local

배경은 박스의 내용물에 고정됩니다: 박스에 스크롤 메커니즘이 있다면, 배경은 내용을 따라 함께 스크롤되며, 배경 그리기 영역과 배경 위치 지정 영역은 테두리가 아니라 박스의 스크롤 가능한 오버플로우 영역을 기준으로 합니다. 스크롤 가능한 오버플로우 영역에는 테두리 영역이 포함되지 않으므로, 스크롤 컨테이너에서 border-box 값의 background-clip은 padding-box와 같게 처리될 수 있습니다.

scroll

배경은 박스 자체에 고정되고, 그 내용과 함께 스크롤되지 않습니다. (실질적으로 박스의 테두리에 붙어있는 효과가 납니다.)

이미지가 고정되어 있더라도, 박스의 배경 그리기 영역에 있거나 잘리지 않은 경우에만 보입니다. (§ 4 특별한 요소의 배경을 참조하면 배경 이미지가 잘리지 않는 경우를 알 수 있습니다.) 따라서 이미지를 타일링하지 않을 경우, 이미지가 보이지 않을 수도 있습니다.

body {
  background: red url("pendant.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
}

참고: fixed 배경을 지원하지 않는 사용자 에이전트 (예: 하드웨어 플랫폼의 한계 등)에서는 fixed 키워드가 명시된 선언을 무시합니다. 예시:

body {
  /* 모든 UA용: */
  background: white url(paper.png) scroll;
  /* fixed 지원 UA용: */
  background: white url(ledger.png) fixed;
}
h1 {
  /* 모든 UA용: */
  background: silver;
  /* fixed 지원 UA용: */
  background: url(stripe.png) fixed, white url(ledger.png) fixed;
}

§ 3 여러 개의 배경 이미지 레이어링에서 background-attachment가 다른 콤마로 구분된 배경 속성과 결합하여 각 배경 이미지 레이어를 형성하는 방법을 확인할 수 있습니다.

2.6. 배경 위치 지정: background-position-x, background-position-y, background-position-inline, background-position-block 속성

이 섹션은 아직 작업 중입니다. 모든 start/end 키워드가 제대로 작동하도록 만드는 것이 까다롭습니다.

이 속성은 배경 위치의 수평(x축) 구성 요소를 지정합니다. 시작 키워드(origin keyword)가 생략된 경우 left로 간주합니다.

이 속성은 배경 위치의 수직(y축) 구성 요소를 지정합니다. 시작 키워드가 생략되면 top으로 간주합니다.

이 속성은 배경 위치의 인라인 축 구성 요소를 지정합니다. 시작 키워드가 생략되면 start로 간주합니다.

이 속성은 배경 위치의 블록 축 구성 요소를 지정합니다. 시작 키워드가 생략되면 start로 간주합니다.

<percentage>

수평 오프셋에 대한 퍼센트는 (배경 위치 지정 영역의 너비 - 배경 이미지의 너비) 에 대한 비율입니다. 수직 오프셋의 퍼센트는 (배경 위치 지정 영역의 높이 - 배경 이미지의 높이) 에 대한 비율입니다. 여기서 이미지의 크기는 background-size에 의해 결정된 크기입니다.

예를 들어, 값 쌍이 0% 0%이면, 이미지의 좌상단이 보통 박스의 패딩 에지와 정렬됩니다. 값 쌍이 100% 100%이면 이미지의 우하단이 영역의 우하단에 위치합니다. 값 쌍이 75% 50%이면, 이미지의 75% 오른쪽, 50% 아래의 지점이 영역의 75% 오른쪽, 50% 아래와 일치하도록 배치됩니다.

<length>

길이 값(length)은 오프셋을 고정 길이로 지정합니다. 예를 들어, 값 쌍이 2cm 1cm이면, 이미지의 좌상단이 배경 위치 지정 영역 좌상단에서 오른쪽으로 2cm, 아래로 1cm 떨어진 곳에 배치됩니다.

top

값이 한 개 또는 두 개인 경우 수직 위치는 0%로 계산되며, 그렇지 않으면 해당 오프셋의 기준이 위쪽(edge)임을 지정합니다.

right

값이 한 개 또는 두 개인 경우 수평 위치는 100%로 계산되며, 그렇지 않으면 해당 오프셋의 기준이 오른쪽(edge)임을 지정합니다.

bottom

값이 한 개 또는 두 개인 경우 수직 위치는 100%로 계산되며, 그렇지 않으면 해당 오프셋의 기준이 아래쪽(edge)임을 지정합니다.

left

값이 한 개 또는 두 개인 경우 수평 위치는 0%로 계산되며, 그렇지 않으면 해당 오프셋의 기준이 왼쪽(edge)임을 지정합니다.

center

수평 위치가 따로 지정되어 있지 않으면 50% (left 50%)로 계산되고, 수직 위치가 그렇다면 50% (top 50%)로 계산됩니다.

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% */

body {
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}

background-position: right 3em bottom 10px

§ 3 여러 개의 배경 이미지 레이어링에서 background-position이 다른 콤마로 구분된 배경 속성과 결합하여 각 배경 이미지 레이어를 형성하는 방법을 확인할 수 있습니다.

2.7. 배경 위치 약식: background-position 속기 속성

만약 배경 이미지가 지정되어 있다면, 이 속성은 해당 이미지가 크기 조절된 후 해당 배경 위치 지정 영역 내에서의 초기 위치를 지정합니다.

이 속성은 약식 속성으로서, 한 번에 background-position-x, background-position-y, background-position-block, background-position-inline의 값을 설정합니다.

값은 <bg-position> 값의 콤마로 구분된 목록이며, 리사이즈된 배경 이미지는 정렬 주체, 배경 위치 지정 영역은 정렬 컨테이너로 하여, <position> 값처럼 해석됩니다.

참고: 키워드 두 개 쌍은 순서를 바꿀 수 있지만, 키워드와 길이 또는 퍼센트 조합은 순서를 바꿀 수 없습니다. 예를 들어 center left는 유효하지만 50% left는 올바르지 않습니다.

세 개 또는 네 개의 값이 주어진 경우, 각각의 <length-percentage>는 오프셋을 나타내며, 앞에 해당 오프셋이 어느 에지(edge)로부터 이루어지는지를 나타내는 키워드가 반드시 와야 합니다. 예를 들어, background-position: bottom 10px right 20px은 10px 위쪽으로(down) 아래쪽 에지에서부터의 오프셋, 20px 왼쪽으로(right) 오른쪽 에지에서부터의 오프셋을 의미합니다. 세 값이 있을 때는 생략된 오프셋은 0으로 간주합니다.

양수 값은 배경 위치 지정 영역의 에지로부터 안쪽 방향의 오프셋을 나타내며, 음수 값은 배경 위치 지정 영역의 에지로부터 바깥쪽 방향의 오프셋을 나타냅니다.

background-position: left 10px top 15px;   /* 10px, 15px */
background-position: left      top     ;   /*  0px,  0px */
background-position:      10px     15px;   /* 10px, 15px */
background-position: left          15px;   /*  0px, 15px */
background-position:      10px top     ;   /* 10px,  0px */
background-position: left      top 15px;   /*  0px, 15px */
background-position: left 10px top     ;   /* 10px,  0px */

<bg-position> =  <position> | <position-three>
<position-three> = [
  [ left | center | right ] && [ [ top | bottom ] <length-percentage> ]
|
  [ [ left | right ] <length-percentage> ] && [ top | center | bottom ]
]

<length-percentage>가 background-position 전용 <position-three> 문법 변형에서 생략된 경우 0%로 간주됩니다.

롱핸드 속성이 어떻게 설정되는지 명시해야 합니다. [이슈 #9690]

2.7.1. background-position 값의 직렬화

지정값과 계산값은 <bg-position> 타입에 대해, [CSS-VALUES-4]의 <position>에 정의된 대로 직렬화됩니다. 세 값 사용하는 경우 (<position>에서는 유효하지 않음), 지정값 직렬화는 동등한 네 값 문법과 동일하지만, 생략된 오프셋은 그대로 생략된 상태로 남습니다.

2.8. 그리기 영역: background-clip 속성

배경 그리기 영역을 결정합니다. 이 영역 내에서 배경이 칠해지는 범위를 결정합니다. 이 속성의 문법은 다음과 같습니다.

<bg-clip> = <visual-box> | [ border-area || text ]

혹은 -webkit-background-clip 속성을 정의하고, 모든 값이 동일하면 이 추가적인 text 값을 이곳에 표기하는 것이 더 나을까요?

<visual-box>

배경은 해당 요소의 지정된 박스 영역 내(클리핑된 상태)에서 칠해집니다.

text

배경은 테두리 박스와 이 요소 및 그 in-flow 및 부유 자식(floated descendants)에 있는 텍스트의 기하 구조(장식 및 강조 표시 포함) 교집합 내에서 칠해집니다. 텍스트의 색상은 배경 그리기에 어떤 영향도 주지 않습니다.

border-area

배경은 테두리가 칠해지는 영역에 클리핑되어 보여집니다. border-width와 border-style은 고려하지만, border-color로 인한 투명도는 무시합니다.

만약 border-area와 text가 모두 지정되었다면, 배경은 이 두 영역의 합집합 내에서 칠해집니다(클리핑됨).

참고: 루트 요소(root element)는 다른 배경 그리기 영역을 갖기 때문에 background-clip 속성이 루트 요소에서는 효과가 없습니다. § 4 특별한 요소의 배경을 참고하세요.

참고: 배경은 항상(존재한다면) 테두리 뒤에 그려집니다. 자세한 쌓임 맥락 설명은 [CSS2] 부록 E를 참고하세요.

CSS Borders and Box Decorations 4 § 3.3 코너 모양(corner-shape) 속성에서 border-radius가 배경 그리기 영역에 주는 영향에 대해 설명합니다.

§ 3 여러 개의 배경 이미지 레이어링에서 background-clip이 콤마로 구분된 다른 배경 속성과 상호작용해 각각의 배경 이미지 레이어를 어떻게 형성하는지 확인할 수 있습니다.

2.9. 위치 지정 영역: background-origin 속성

이 속성은 배경 위치 지정 영역을 결정합니다: 배경 이미지가 배치되는 영역입니다. 여러 박스 조각 (예: 여러 줄에 걸친 인라인 박스, 여러 페이지의 박스)로 렌더링되는 요소의 경우, 어떤 박스에서 box-decoration-break [CSS-BREAK-3]가 동작해 배경 위치 지정 영역을 결정하는지 지정합니다.

padding-box

위치는 패딩 박스 기준입니다. (단일 박스의 경우 0 0은 패딩 에지의 좌상단, 100% 100%은 우하단을 의미합니다.)

border-box

위치는 테두리 박스 기준입니다.

content-box

위치는 콘텐츠 박스 기준입니다.

이 background-attachment 값이 해당 레이어에서 fixed인 경우, 이 속성은 아무 효과가 없습니다: 이 경우 배경 위치 지정 영역은 초기 포함 블록이 됩니다.

참고: background-clip이 padding-box이고, background-origin이 border-box이며, background-position이 top left (초깃값)이고, 요소에 0이 아닌 테두리가 있을 때, 배경 이미지의 위쪽과 왼쪽이 잘릴 수 있습니다.

§ 3 여러 개의 배경 이미지 레이어링에서 background-origin이 콤마로 구분된 다른 배경 속성과 어떻게 상호작용하여 각 배경 이미지 레이어를 형성하는지 확인할 수 있습니다.

2.10. 이미지 크기 지정: background-size 속성

이 속성은 각 배경 이미지의 크기를 지정합니다. 속성 값은 <bg-size> 값의 콤마로 구분된 목록으로 주어집니다.

<bg-size> = [ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain

값의 의미는 다음과 같습니다:

contain

이미지의 자연 종횡비(있는 경우)를 보존하면서, 폭과 높이가 모두 배경 위치 지정 영역 안에 들어갈 수 있을 때까지 최대 크기로 이미지를 확대/축소합니다.

cover

이미지의 자연 종횡비(있는 경우)를 보존하면서, 폭과 높이가 모두 배경 위치 지정 영역을 완전히 덮을 수 있을 때까지 최소 크기로 이미지를 확대/축소합니다.

[ <length-percentage [0,∞]> | auto ]{1,2}

첫 번째 값은 해당 이미지의 너비, 두 번째 값은 높이를 지정합니다. 값이 하나만 주어진 경우 두 번째 값은 auto로 간주합니다.

<percentage>는 배경 위치 지정 영역을 기준으로 합니다.

한 차원에 대해 auto 값이면 이미지의 자연 종횡비, 다른 차원의 크기, 또는 없으면 이미지의 자연 크기를 사용, 둘 다 없으면 100%로 처리합니다.

두 값이 모두 auto면 이미지의 자연 너비 및/또는 높이를 사용해야 하며, 누락된 차원은 위에서 설명한 대로 auto처럼 동작합니다. 이미지에 자연 크기가 없으면, contain으로 처리합니다.

음수 값은 허용되지 않습니다.

div {
  background-image: url(plasma.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-origin: content-box;
}

p {
  background-image: url(tubes.png);
  background-size: 50% auto;
  background-origin: border-box;
}

p {
  background-size: 15px 15px;
  background-image: url(tile.png);
}

body {
  background-size: auto;            /* 기본값 */
  background-image: url(flower.png);
}

p {
  background-image: url(chain.png);
  background-repeat: no-repeat round;
  background-size: 20% 30%;
}

background-repeat가 한 축(또는 둘 다)에 대해 round라면 두 번째 단계가 있습니다. UA는 해당 차원(혹은 둘 다)에서 이미지가 배경 위치 지정 영역에 정수 번 정확히 들어맞도록 크기를 조정해야 합니다. 폭(width) 기준 공식은 다음과 같습니다:

만약 X ≠ 0이 1단계 이후 이미지 폭이고 W는 배경 위치 지정 영역의 폭이라면, 반올림된 폭 X' = W / round(W / X) (여기에서 round()는 가장 가까운 자연수(0보다 큰 정수)를 반환합니다).

background-repeat이 한 차원에만 round이고, background-size의 다른 차원이 auto일 경우 세 번째 단계: 그 다른 차원도 원래 종횡비를 보존하도록 크기가 조정됩니다.

div {
  background-image: url(image1.png);
  background-repeat: repeat;         /* 기본값 */
  background-size: auto;             /* 기본값 */
}

div {
  background-image: url(image2.png);
  background-repeat: repeat;         /* 기본값 */
  background-size: 3em;              /* = '3em auto' */
}

div {
  background-image: url(image3.png);
  background-repeat: round repeat;
  background-size: 3em auto;
}

div {
  background-image: url(image4.png);
  background-repeat: repeat round;
  background-size: 3em auto;
}

div {
  background-image: url(image5.png);
  background-repeat: round;
  background-size: auto 4em;
}

배경 이미지의 폭 또는 높이가 0으로 지정되면, 이미지는 표시되지 않습니다. (투명한 이미지와 동일한 효과입니다.)

§ 3 여러 개의 배경 이미지 레이어링에서 background-size가 콤마로 구분된 다른 배경 속성과 어떻게 상호작용하여 각 배경 이미지 레이어를 형성하는지 확인할 수 있습니다.

2.10.1. background-size 값의 직렬화

지정값과 계산값은 <bg-size> 타입에 대해, 가장 짧고 이전 버전과 호환되는 직렬화 원칙에 따라, 두 값으로 항상 직렬화됩니다(두 번째 값이 auto인 경우 포함).

2.11. 배경 이미지 레이어: background-tbd 속기 속성

background-tbd 속성은 약식 속성으로서, background 약식과 동일한 모든 속성을 설정하지만, background-color는 제외합니다. 이렇게 하면 저자는 배경 이미지를 손쉽게 선언하고 위치를 지정하면서도 background-color는 따로 독립적으로 계단식 처리를 할 수 있습니다.

이 속성의 이름에 대한 논의는 issue 9083 참고.

p {
  background-color: green;
}

p {
  background-tbd:
    url(a.png) top left,
    url(b.png) top left no-repeat;
}

p {
  background: url(pass.png) green;   /* 유효 */
  background-tbd: url(fail.png) red; /* 무효 */
}

2.12. 배경 약식: background 속성

background 속성은 스타일시트에서 대부분의 배경 속성을 한 번에 설정하는 약식 속성입니다. 콤마로 구분된 값의 개수는 배경 이미지 레이어의 개수를 정의합니다. 올바른 선언에서는 각 레이어에 대해 이 약식은 background-image, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment 속성을 해당 속성의 초깃값으로 먼저 설정한 다음, 선언에서 이 레이어에 명시적으로 지정된 값을 할당합니다. 마지막으로 background-color는 지정된 색상이 있으면 해당 색상으로, 없으면 초깃값으로 설정됩니다.

이 속성의 값은 다음과 같은 콤마 구분 값의 목록입니다.

<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <bg-clip> || <visual-box>
<final-bg-layer> =  <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <bg-clip> || <visual-box> || <'background-color'>

참고: <final-bg-layer> 에서는 색상이 허용되지만, <bg-layer> 에서는 허용되지 않습니다.

하나의 <visual-box> 값이 있으면, background-origin과 background-clip 모두 해당 값으로 설정됩니다. 하지만, background-clip에만 유효한 값을 지정하면, background-clip는 해당 값으로, background-origin는 border-box로 설정됩니다. 두 개의 <visual-box> 값이 있으면, 첫 번째는 background-origin을, 두 번째는 background-clip을 설정합니다.

body { background: red }
p { background: url("chess.png") 40% / 10em gray
                round fixed border-box; }

body {
    background-color: red;
    background-position: 0% 0%;
    background-size: auto;
    background-repeat: repeat;
    background-clip: border-box;
    background-origin: padding-box;
    background-attachment: scroll;
    background-image: none }

p {
  background-color: gray;
  background-position: 40% 50%;
  background-size: 10em auto;
  background-repeat: round;
  background-clip: border-box;
  background-origin: border-box;
  background-attachment: fixed;
  background-image: url(chess.png);
}

E { background: #CCC url("metal.jpg") top left / 100% auto no-repeat}

div {
  background: padding-box url(paper.jpg) white center;
}

div {
  background-color: white;
  background-image: url(paper.jpg);
  background-repeat: repeat;
  background-attachment: scroll;
  background-position: center;
  background-clip: padding-box;
  background-origin: padding-box;
  background-size: auto auto;
}

background: url(a.png) top left no-repeat,
            url(b.png) center / 100% 100% no-repeat,
            url(c.png) white;

background-image:      url(a.png),  url(b.png),          url(c.png);
background-position:   top left,    center,              top left;
background-repeat:     no-repeat,   no-repeat,           repeat;
background-clip:       border-box,  border-box,          border-box;
background-origin:     padding-box, padding-box,         padding-box;
background-size:       auto auto,   100% 100%,           auto auto;
background-attachment: scroll,      scroll,              scroll;
background-color:      white;

3. 여러 개의 배경 이미지 레이어링

박스의 배경에는 여러 개의 배경 이미지 레이어를 둘 수 있습니다. 레이어의 개수는 background-image 속성의 콤마 구분 값의 개수로 결정합니다. none 값이어도 레이어는 생성됨에 주의하세요.

각 배경 이미지는 다른 배경 속성의 각각에 대응하는 값에 따라 크기, 위치, 타일링되어 그려집니다. 이 값들은 첫 번째 값부터 순서대로 매칭됩니다. 끝에 남는 초과 값은 사용되지 않습니다. 속성의 값이 레이어 개수보다 모자라면, UA는 사용된 값을 값 리스트 반복으로 보충해 계산합니다.

background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left, bottom right;
background-origin: border-box, content-box;
background-repeat: no-repeat;

background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left;
background-origin: border-box, content-box, border-box;
background-repeat: no-repeat, no-repeat, no-repeat;

목록의 첫 번째 이미지는 사용자에게 가장 가까운 레이어에, 그 다음 이미지는 그 뒤에, ... 이런 식으로 순차적으로 칠해집니다. 배경색이 존재한다면, 모든 레이어 하단에 배경색이 칠해집니다.

참고: border-image 속성도 배경 이미지를 정의할 수 있으며, 이 경우 배경 속성이 만든 배경 레이어 위에 그려집니다.

4. 특별한 요소의 배경

문서의 캔버스는 문서가 렌더링되는 무한 표면입니다. [CSS2] 어떤 요소도 캔버스 자체에 대응하지 않으므로, 캔버스에 스타일을 줄 수 있도록 CSS는 아래에 설명된 대로 루트 요소(HTML의 경우 <body> 요소)의 배경을 전파합니다. 단, 캔버스의 배경으로 사용될 요소가 display: none인 경우, 캔버스 배경은 투명합니다.

캔버스 배경이 불투명하지 않다면, 아래의 캔버스 표면이 비쳐 보이게 됩니다. 캔버스 표면의 질감은 UA(브라우저) 마다 다를 수 있으며, (보통 불투명 흰색임)

4.1. 캔버스 배경과 루트 요소

루트 요소의 배경은 캔버스 배경이 되며, 그 배경 그리기 영역은 전체 캔버스를 덮도록 확장합니다. 그러나 이미지는 루트 요소의 박스를 기준으로 크기 및 위치가 정해지며, 마치 그 요소에만 그린 것처럼 렌더링됩니다. (즉, 배경 위치 지정 영역은 루트 요소 기준입니다.) 루트 요소는 이 배경을 다시 칠하지 않으므로, 해당 요소의 사용된 값의 배경은 transparent입니다.

4.2. 캔버스 배경과 HTML <body> 요소

루트 요소가 HTML HTML 요소이거나 XHTML html 요소인 문서에서 [HTML]: background-image가 루트 요소에서 none이고, background-color는 transparent로 계산값이 설정된 경우, 사용자 에이전트는 대신 그 요소의 첫 번째 HTML BODY 또는 XHTML body 자식 요소에서 배경 속성의 계산값을 전파해야 합니다. 해당 BODY 요소의 배경 속성의 사용된 값은 각 초깃값이 되며, 전파된 값들은 마치 루트 요소에 명시된 것처럼 취급됩니다. HTML 문서의 저자는 HTML 요소보다는 BODY 요소를 사용해 캔버스 배경을 명시하는 것이 권장됩니다.

참고: containment를 사용하면 HTML body 요소에 대한 이 특별 처리가 비활성화됩니다. 자세한 내용은 CSS Containment 1 § 2 강한 포함(containment): contain 속성을 참조하세요.

<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.0//EN'
  >
<html>
  <head>
    <title>Setting the canvas background</title>
    <style type="text/css">
       body { background: url("http://example.org/marble.png") }
    </style>
  </head>
  <body>
    <p>My background is marble.</p>
  </body>
</html>

4.3. ::first-line 가상 요소의 배경

::first-line 가상 요소는 배경과 관련해서는 인라인 레벨 요소와 유사하게 동작합니다 ([CSS2]의 5.12.1절 참고). 예를 들어, 왼쪽 정렬된 첫 줄에서 배경은 반드시 오른쪽 끝까지 확장되지 않을 수 있습니다.

5. 변경 사항

5.1. [CSS3BG] 이후 추가된 내용

• background-position을 약식(shorthand)으로 변경하고 물리적 및 논리적 롱핸드를 추가함

• <bg-position>에 논리 키워드를 추가함

• border-area와 text 값을 background-clip에 추가함

• background-tbd 속성을 추가함

• background-repeat-* 롱핸드 속성을 추가함

• repeat-block 및 repeat-inline 논리 키워드를 background-repeat에 추가함

6. 감사의 말

이 모듈의 전 단계인 [CSS1], [CSS2], [CSS3BG]의 많은 기여자분들 외에도, 편집자들은 특히 Level 4를 위해 조언과 피드백을 제공한 Tab Atkins, Håkon Wium Lie에게 감사를 전합니다.

프라이버시 고려사항

이 명세에 대해 추가된 새로운 프라이버시 고려사항은 없습니다.

보안 고려사항

이 명세에 대해 추가된 새로운 보안 사항은 없습니다.