번역 작업 진행중입니다.

background CSS 속성은 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 선언할 때 사용합니다.

 

background는 단축 속성으로 다음 속성을 한 번에 선언할 수 있습니다.

다른 단축 속성과 마찬가지로, 빠진 하위 속성은 기본값으로 설정됩니다.

 

구문

/* Using a <background-color> */
background: green;

/* Using a <bg-image> and <repeat-style> */
background: url("test.jpg") repeat-y;

/* Using a <box> and <background-color> */
background: border-box red;

/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png");

background 속성을 쉼표로 구분해 여러 배경 레이어를 설정할 수 있습니다.

각 레이어의 구문은 다음과 같습니다.

<attachment>
See background-attachment
<box>
See background-clip
<background-color>
See background-color
<bg-image>
See background-image
<position>
See background-position
<repeat-style>
See background-repeat
<bg-size>
See background-size. This property must be specified after <position>, separated with the '/' character.

예제

HTML

<p class="topbanner">
  Starry sky<br/>
  Twinkle twinkle<br/>
  Starry sky
</p>
<p class="warning">Here is a paragraph<p>

CSS

.warning { 
  background: pink; 
}

.topbanner { 
  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; 
}

결과

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'background' in that specification.
Candidate Recommendation The shorthand property has been extended to support multiple backgrounds and the new background-size, background-origin and background-clip properties.
CSS Level 2 (Revision 1)
The definition of 'background' in that specification.
Recommendation No significant changes
CSS Level 1
The definition of 'background' in that specification.
Recommendation Initial definition

초기값as each of the properties of the shorthand:
적용대상all elements. It also applies to ::first-letter and ::first-line.
상속no
Percentagesas each of the properties of the shorthand:
  • background-position: refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets
  • background-size: relative to the background positioning area
Mediavisual
Computed valueas each of the properties of the shorthand:
Animation typeas each of the properties of the shorthand:
Canonical orderorder of appearance in the formal grammar of the values

브라우저 호환성

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support112143.51
Multiple backgrounds1123.6910.51.3
SVG image as background311299215.1
Values of background-size longhand211299215.1
Values of background-origin longhand2112229215.1
Values of background-clip longhand2112229215.1
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support2.1 ? Yes453.2 ?
Multiple backgrounds2.1 ? Yes4 ?3.2 ?
SVG image as background3 ? Yes4 Yes4.2 ?
Values of background-size longhand3 ? Yes18 Yes4 ?
Values of background-origin longhand3 ? Yes22 No4 ?
Values of background-clip longhand3 ? Yes22 No4 ?

더 보기


Categoria

문서 태그 및 공헌자

이 페이지의 공헌자: urty5656, teoli, SphinxKnight, hoony, Yuichiro, Pastelgrim
최종 변경: urty5656,