CSSbackground 一括指定プロパティは、色、画像、原点と寸法、反復方法、その他の機能など、背景に関するすべてのスタイルプロパティを一括で設定します。

このプロパティは、 background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, background-attachment を単一の宣言で設定できる一括指定プロパティです。

他の一括指定プロパティと同様に、省略された値は初期値に設定されます。

構文

/* <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 プロパティは1つまたは複数の背景レイヤーをコンマで区切って指定します。

それぞれのレイヤーの構文は以下の通りです。

<attachment>
background-attachment を参照
<box>
background-clip 及び background-origin を参照
<background-color>
background-color を参照
<bg-image>
background-image を参照
<position>
background-position を参照
<repeat-style>
background-repeat を参照
<bg-size>
background-size を参照。

形式文法

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

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

where
<bg-image> = none | <image>
<bg-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>
<id-selector> = <hash-token>
<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( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<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}
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]

where
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
<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: pink; 
}

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

結果

アクセシビリティの考慮事項

支援技術は背景画像を解釈できません。画像がページ全体の目的を理解するために必須の情報を含んでいる場合は、文書中に意味的に記述するようにしてください。

仕様書

仕様書 状態 備考
CSS Backgrounds and Borders Module Level 3
background の定義
勧告候補 一括指定プロパティが拡張され、複数の背景と新しい background-size, background-origin, background-clip プロパティに対応した。
CSS Level 2 (Revision 1)
background の定義
勧告 重要な変更なし
CSS Level 1
background の定義
勧告 初回定義

初期値一括指定の各プロパティとして
適用対象すべての要素。 ::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
メディア視覚
計算値一括指定の各プロパティとして
アニメーションの種類一括指定の各プロパティとして
正規順序形式文法における値の出現順

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 4Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 2Chrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 5Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 あり
Multiple backgroundsChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 3.6IE 完全対応 9Opera 完全対応 10.5Safari 完全対応 1.3WebView Android 完全対応 2Chrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android ? Safari iOS 完全対応 3.2Samsung Internet Android 完全対応 あり
SVG image as backgroundChrome 完全対応 31Edge 完全対応 12Firefox 完全対応 9IE 完全対応 9Opera 完全対応 21Safari 完全対応 5.1WebView Android 完全対応 3Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 4Opera Android 完全対応 ありSafari iOS 完全対応 4.2Samsung Internet Android ?
Values of background-size longhandChrome 完全対応 21Edge 完全対応 12Firefox 完全対応 9IE 完全対応 9Opera 完全対応 21Safari 完全対応 5.1WebView Android 完全対応 3Chrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 18Opera Android 完全対応 ありSafari iOS 完全対応 4Samsung Internet Android 完全対応 あり
Values of background-origin longhandChrome 完全対応 21Edge 完全対応 12Firefox 完全対応 22IE 完全対応 9Opera 完全対応 21Safari 完全対応 5.1WebView Android 完全対応 3Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 22Opera Android 未対応 なしSafari iOS 完全対応 4Samsung Internet Android ?
Values of background-clip longhandChrome 完全対応 21Edge 完全対応 12Firefox 完全対応 22IE 完全対応 9Opera 完全対応 21Safari 完全対応 5.1WebView Android 完全対応 3Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 完全対応 22Opera Android 未対応 なしSafari iOS 完全対応 4Samsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

関連情報