요소의 배경과 관련된 모든 속성을 한 번에 설정하는 속기 속성이다.
CSS3 방식과 그 이전 방식으로 정의가 가능하다. 세부 속성의 작성 순서는 정해져 있지 않다. 세부 속성은 생략될 수 있으며 생략이 된 경우에는 해당 속성의 기본 값으로 설정된다.
CSS3에서는 복수의 배경 설정이 가능해졌으며 <bg-layer> 타입으로 지정이 가능하다.
속기형으로 배경을 설정하는 타입을 나타낸다. 콤마로 구분하여 <bg-layer> 타입으로 연속해서 한 개 이상의 배경을 설정한다. 연속된 배경 설정을 포함해서 마지막 설정되는 값은 <final-bg-layer> 타입이어야 한다.
[ <bg-layer># , ]? <final-bg-layer>
선택적으로 한 개 이상의 <bg-layer>를 <final-bg-layer>와 함께 콤마로 구분하여 작성한다.
<'background-color'>를 갖는 <final-bg-layer>는 단독인 경우에는 필수이며 목록의 경우에는 맨 끝에 선택적으로 작성한다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
배경 레이어가 겹쳐있는 경우 맨 마지막(아래)이(가) 아닌 위치의 배경에 대한 설정 값을 나타낸다. <'background-color'> 값을 지정할 수 없다.
<bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
배경 이미지가 지정된 경우 뷰포트로 부터 고정(fixed), 스크롤(scroll) 또는 콘텐츠와 함께 스크롤(local)할지를 나타내는 타입이다. 다중 배경인 경우 콤마로 구분된 연속된 값을 가질 수 있다.
scroll | fixed | local
뷰포트에 고정을 시킨다.
요소에게 적용된 배경 이미지가 요소의 콘텐츠와 함께 스크롤 된다.
기본 값이며 요소와 함께 배경을 스크롤한다.
<'background-image'> 속성에 사용되는 값을 나타낸다. url() 함수를 사용해서 2차원 이미지를 설정하거나 그라디언트를 설정할 수 있다. 다중 배경인 경우 콤마로 구분된 연속된 값을 가질 수 있다.
<image> | none두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.
background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);
선형 그라데이션
background: radial-gradient(#FF0000, #00FF00, #FFFF00);
원형 그라데이션
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
2차원 이미지를 나타낸다.
<url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>
<url>로 외부의 리소스를 연결하거나 <image-set()>, <cross-fade()>, <element()> 값으로 생성된다. 또한 그라디언트도 가능하다.
현재 image()는 지원하지 않는다.
두 가지 이상의 색상 간 점진적인 전환으로 구성된 특수한 유형의 이미지를 나타낸다.
background: linear-gradient(to right, #FF0000, #00FF00, #FFFF00);
선형 그라데이션
background: radial-gradient(#FF0000, #00FF00, #FFFF00);
원형 그라데이션
이미지나 글꼴 등 리소스를 가리키는 문자열을 나타낸다.
<url()> | <src()>src() 함수의 매개변수를 나타낸다.
src( <string> <url-modifier>* )따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
모든 속성을 표시하지 않을 수도 있다.
글꼴을 지정한다.
가상 요소로 생성할 콘텐츠를 설정한다.
인용 부호의 유형을 설정한다.
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
url() 함수의 매개변수를 나타낸다.
url( <string> <url-modifier>* ) | <url-token>
따옴표로 감싸진 데이터 유형을 표현한다.
"this is a 'string'."
URL의 의미나 해석을 어떻게든 변경하는 타입이다.
모든 함수를 표시하지 않을 수도 있다.
모든 속성을 표시하지 않을 수도 있다.
선택자를 갖는 요소에 배경 이미지를 설정한다.
요소의 클리핑 범위를 설정한다.
모든 함수를 표시하지 않을 수도 있다.
모든 함수를 표시하지 않을 수도 있다.
다음 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.
어떠한 값도 설정하지 않음을 나타낸다.
<'background-position'> 속성에 사용되는 값을 나타낸다. 다중 배경인 경우 콤마로 구분된 연속된 값을 가질 수 있다.
[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]
<length>와 <percentage> 타입을 나타낸다.
<length> | <percentage>숫자와 단위를 사용하여 길이, 크기, 위치를 나타내는 자료형이며 CSS에서 가장 자주 사용한다.
<length>
아래의 모든 단위를 사용할 수 있는지 확인해야 할 수도 있다.
1cm(센티미터)는 96px를 2.54로 나눈 값을 나타낸다.
1in(인치)는 2.54cm, 96px과 동일한 값을 나타낸다.
1cm의 1/10 값을 나타낸다.
1in의 1/16 값을 나타낸다.
1in의 1/72 값을 나타낸다.
스크린의 기본 단위이다. 1in의 1/96 값을 나타낸다.
1cm의 1/40을 나타낸다.
보통 1도라고 불리는 단위를 말하며 360deg가 완전한 원을 만든다.
400grad(그라디안)은 완전한 원을 만든다.
2π(라디안)이 완전한 원을 만든다.
1turn(턴)이 완전한 원을 만든다.
대상 요소의 폰트의 대문자 높이를 상대 단위의 기준으로 사용한다.
글꼴 크기에 대한 0(ZERO, U+0030) 문자의 너비를 상대적인 기준으로 하는 단위이다.
대상 요소의 폰트 크기를 상대 단위의 기준으로 사용한다.
대상 요소의 폰트의 x-height를 상대 기준으로 사용한다.
한국, 중국, 일본 문자(CJK)의 일반적인 어드밴스 메저(advance measure)를 나타낸다. 상대적인 기준이 되는 값은 표의 문자 '水'의 너비 또는 높이이다.
요소의 line-height 속성의 값을 상대 단위의 기준으로 사용한다.
html 요소(:root)의 폰트 크기를 상대 기준으로 사용한다.
html 요소(:root)의 line-height 속성 값을 상대 단위의 기준으로 사용한다.
1초당 발생한 진동수를 나타낸다.
1000Hz를 나타낸다.
그리드 컨테이너 내에서 남은 공간에 대한 차지하는 비율 값을 나타낸다.
html 요소의 블록축 방향으로 뷰포트 길이의 1%를 나타낸다.
뷰포트 높이를 상대적으로 1% 높이를 갖는다.
html 요소의 인라인 축 방향으로 뷰포트 길이의 1%를 나타낸다.
vw 또는 vh 중 큰 값을 나타낸다.
vw 또는 vh 중 작은 값을 나타낸다.
뷰포트 너비를 상대적으로 1% 폭을 갖는다.
1cm당 점(dot)의 수를 나타낸다.
1in당 점(dot)의 수를 나타낸다.
1픽셀(pixel)당 점(dot)의 수를 나타낸다.
1초를 1000으로 나눈 밀리초(milliseconds)를 나타낸다.
초를 나타낸다.
어떠한 기준으로 부터 백분율로 표현한다.
배경의 끝나는 위치를 요소의 하단에 맞춘다.
배경의 중심을 요소의 중앙에 맞춘다.
배경의 시작되는 위치를 요소의 좌측에 맞춘다.
배경의 끝나는 위치를 요소의 우측에 맞춘다.
배경의 시작되는 위치를 요소의 상단에 맞춘다.
<'background-size'> 속성에 사용하는 값을 나타낸다. 다중 배경인 경우 콤마로 구분된 연속된 값을 가질 수 있다.
[ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain
<length>와 <percentage> 타입을 나타낸다.
<length> | <percentage>이미지의 종횡비와 다른 차원의 크기를 사용하거나 실패하면 이미지의 원래 크기를 사용하거나 100%로 처리한다.
배경 이미지의 비율을 유지하면서 어느쪽도 잘리지 않도록 비율에 따라서 요소의 가로 또는 세로에 꽉 차게 맞춘다. 따라서 요소의 가로와 세로 중 어느 한 방향은 배경 이미지가 미치지 않은 빈 곳이 생길 수도 있다.
배경 이미지의 비율을 유지하면서 요소 내에 꽉 차게 보여 준다. 따라서 요소의 크기에 따라 배경 이미지의 가로와 세로 방향 중의 어느 한 곳은 일부 잘려 보이지 않을 수 있다.
배경이 그려지는 영역을 결정하는 배경 페인팅 영역을 설정하는 값을 나타낸다.
border-box | padding-box | content-box
테두리가 있다면 테두리 영역까지의 범위를 정의한다. SVG 컨텍스트에서는 stroke-box와 동일한 값으로 사용된다.
실제로 콘텐츠가 보여지는 범위를 정의한다. SVG 컨텍스트에서는 fill-box와 동일한 값으로 사용된다.
내부 여백이 있다면 테두리를 뺀 내부 여백 포함을 나타내는 범위를 정의한다. SVG 컨텍스트에서는 fill-box와 동일한 값으로 사용된다.
배경 이미지의 크기와 위치가 지정된 후 타일링되는 방식을 설정하는 값을 나타낸다.
repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
반복하지 않는다.
기본 값이며 수직, 수평으로 반복 적용한다.
수평 방향으로만 반복 적용한다.
수직 방향으로만 반복 적용한다.
이미지는 배경 위치 지정 영역에 맞는 만큼 반복된다. 배경 이미지가 영역에 맞도록 조정된다.
이미지가 잘리지 않고 배경 위치 지정 영역에 맞는 만큼 반복되어 해당 영역을 채우도록 적절한 간격을 계산해서 처리한다.
배경 레이어가 겹쳐있는 경우 맨 마지막(아래)에 위치할 배경에 대한 설정 값 타입이다. <'background-color'> 설정이 가능하다.
<'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
배경 이미지가 지정된 경우 뷰포트로 부터 고정(fixed), 스크롤(scroll) 또는 콘텐츠와 함께 스크롤(local)할지를 나타내는 타입이다. 다중 배경인 경우 콤마로 구분된 연속된 값을 가질 수 있다.
scroll | fixed | local
<'background-image'> 속성에 사용되는 값을 나타낸다. url() 함수를 사용해서 2차원 이미지를 설정하거나 그라디언트를 설정할 수 있다. 다중 배경인 경우 콤마로 구분된 연속된 값을 가질 수 있다.
<image> | none<'background-position'> 속성에 사용되는 값을 나타낸다. 다중 배경인 경우 콤마로 구분된 연속된 값을 가질 수 있다.
[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]
<'background-size'> 속성에 사용하는 값을 나타낸다. 다중 배경인 경우 콤마로 구분된 연속된 값을 가질 수 있다.
[ <length-percentage [0,∞]> | auto ]{1,2} | cover | contain
배경이 그려지는 영역을 결정하는 배경 페인팅 영역을 설정하는 값을 나타낸다.
border-box | padding-box | content-box
배경 이미지의 크기와 위치가 지정된 후 타일링되는 방식을 설정하는 값을 나타낸다.
repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}
background: <final-bg-layer>;
background: <bg-layer>, <final-bg-layer>;
| Modules | ||
|---|---|---|
| Module Name | Status | Summary |
| CSS Backgrounds and Borders Module Level 3 | Last review date: 2022-7-9 | |