현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

요약

background속성은 style sheet에서 한 구역의 배경 속성값을 설정하기 위한 속성이다. background은 다음 중 하나 혹은 여러개의 값을 설정하는데 사용될 수 있다. : background-attachment, background-color, background-image, background-position, background-repeat.

초기값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:
  • background-image: as specified, but with URIs made absolute
  • background-position: a list, each item consisting of two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a length), otherwise as a percentage
  • background-size: as specified, but with relative lengths converted into absolute lengths
  • background-repeat: a list, each item consisting of two keywords, one per dimension
  • background-origin: as specified
  • background-clip: as specified
  • background-attachment: as specified
  • background-color: If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one. The transparent keyword maps to rgba(0,0,0,0).
Animatableas each of the properties of the shorthand:
  • background-color: yes, as a color
  • background-image: no
  • background-clip: no
  • background-position: yes, as a repeatable list of , a simple list of , a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
  • background-size: yes, as a repeatable list of , a simple list of , a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers. . This means keyword values are not animatable.
  • background-repeat: no
  • background-attachment: no
Canonical orderorder of appearance in the formal grammar of the values

Syntax

background: [background-color || background-image ||
    background-repeat || background-attachment ||
    background-position] | inherit]

Values

One or more of the following, in any order:

<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: red; 
}

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

Result

Notes

유효한 선언을 해라. background 속성은 먼저 초기값으로 설정한다. 그리고나서, 선언 안의 구체적인 값으로 설정한다. 각각의 속성 하나하나의 값을 설정하지말고, 단지 기본 초기값을 바꿔라.

Specifications

Browser 호환성

Browser 지원가능한 최소 버전
Internet Explorer 4
Firefox 1
Netscape 6
Opera 3.5

See Also

background, background-attachment, background-color, background-image, background-position, background-repeat


Categoria

문서 태그 및 공헌자

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