この翻訳は不完全です。英語から この記事を翻訳 してください。

概要

background CSS プロパティは個々の背景関連プロパティの値を、スタイルシートの単一の場所で設定するショートハンドプロパティです。background は次のプロパティのうち一つ以上に対する値を設定するのに使うことができます: background-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size、および background-attachment

background CSS ショートハンドプロパティは、明示的に値を指定されたもの以外は初期値に設定します。

初期値以下の各プロパティのショートハンドとして補完します:
適用対象全要素. It also applies to ::first-letter and ::first-line.
継承不可
相対値の基準以下の各プロパティのショートハンドとして補完します:
  • 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
メディアvisual
計算値以下の各プロパティのショートハンドとして補完します:
  • 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: 指定通り。ただし相対的 length は絶対的 length に変換
  • background-repeat: a list, each item consisting of two keywords, one per dimension
  • background-origin: 指定値
  • background-clip: 指定値
  • background-attachment: 指定値
  • background-color: 半透明の値なら、計算値はそれに対応する rgba()。さもなくばその値に対応する rgb()transparent キーワードは rgba(0,0,0,0) にマップされます。
Animation type以下の各プロパティのショートハンドとして補完します:
正規順序order of appearance in the formal grammar of the values

構文

/* <background-color> を使用 */
background: green;

/* <bg-image> と <repeat-style> を使用 */
background: url("test.jpg") repeat-y;

/* <box> と <background-color> を使用 */
background: border-box red;

/* 単一の画像、中央寄せかつ縮小 */
background: no-repeat center/80% url("../img/image.png");
補足: 要素全体に対して背景色は一つだけなので、background-color は最後の背景にしか定義できません。

以下の値を一つ以上、任意の順に記述します:

<attachment>
background-attachment を参照
<box>
background-clip を参照
<background-color>
background-color を参照
<bg-image>
background-image を参照
<position>
background-position を参照
<repeat-style>
background-repeat を参照
<bg-size>
background-size を参照。このプロパティは必ず <position> の後に、文字 '/' で区切って指定しなければなりません。

形式文法

[ <bg-layer> , ]* <final-bg-layer>

where
<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

where
<bg-image> = none | <image>
<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>? ]]
<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain
<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
<attachment> = scroll | fixed | local
<box> = border-box | padding-box | content-box

where
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<length-percentage> = <length> | <percentage>

where
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>

where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )

where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}

where
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
<color-stop> = <color> <length-percentage>?

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

仕様

仕様書 策定状況 コメント
CSS Backgrounds and Borders Module Level 3
background の定義
勧告候補 ショートハンドプロパティが拡張され、複数の背景と新しい background-sizebackground-originbackground-clip プロパティをサポートします。
CSS Level 2 (Revision 1)
background の定義
勧告 重要な変更なし
CSS Level 1
background の定義
勧告  

ブラウザ実装状況

機能 Firefox (Gecko) Chrome Internet Explorer Opera Safari
基本サポート 1.0 (1.7 or earlier) 1.0 4.0 3.5 1.0
複数の背景 3.6 (1.9.2) 1.0 9.0 10.5 1.3
SVG 画像の背景への適用 4.0 (2.0) 31.0 9.0 21.0 5.1
background-size のサポート 18.0 (18.0) 21.0 9.0 21.0 5.1
background-originbackground-clip のサポート 22.0 (22.0) 31.0 9.0 21.0 5.1
機能 Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
基本サポート 1.0 (1.9.2) 2.1 10.0 5.0 3.2
複数の背景 1.0 (1.9.2) 2.1 10.0 5.0 3.2
SVG 画像の背景への適用 4.0 (2.0) 3.0 10.0 ? 4.2
background-size のサポート 18.0 (18.0) 3.0 10.0 (有) 4.0
background-originbackground-clip のサポート 22.0 (22.0) 3.0 10.0 未サポート 4.0

関連情報

ドキュメントのタグと貢献者

 最終更新者: takahashim,