background

概要

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

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

構文

/* <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");

値

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

<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

仕様

ブラウザ実装状況

関連情報

• -moz-background-inline-policy
• グラデーションの利用
• 複数の背景