Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

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

概要

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) にマップされます。
アニメーションの可否以下の各プロパティのショートハンドとして補完します:
  • background-color: 可。 の値として補完しますcolor
  • background-image: 不可
  • background-clip: 不可
  • background-position: 可。 。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちますの値として補完しますの反復可能リスト、の単純なリスト形式$1$、length または percentage, calc();
  • background-size: 可。 。両方の値が length の場合は、length 値として補完されます。両方の値が percentage の場合は、percentage 値として補完されます。それ以外の場合は、両方の値が calc() 関数にコンバートされ、length と percentage の合計になります (または各値が 0)。そして、これらの calc() 関数は、それぞれ半分ずつ補完された実数を持ちます. This means keyword values are not animatable.の値として補完しますの反復可能リスト、の単純なリスト形式$1$、length または percentage, calc();
  • background-repeat: 不可
  • background-attachment: 不可
正規順序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>
<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

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
The definition of 'background' in that specification.
勧告候補 ショートハンド・プロパティが拡張され、複数の背景と新しい background-sizebackground-originbackground-clip プロパティをサポートします。
CSS Level 2 (Revision 1)
The definition of 'background' in that specification.
勧告 重要な変更なし
CSS Level 1
The definition of 'background' in that specification.
勧告  

ブラウザ実装状況

機能 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

関連情報

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

 最終更新者: teoli,