background プロパティ (CSS)

試してみましょう

background: green;

background: content-box radial-gradient(crimson, skyblue);

background: no-repeat url("/shared-assets/images/examples/lizard.png");

background: left 5% / 15% 60% repeat-x
  url("/shared-assets/images/examples/star.png");

background:
  center / contain no-repeat
    url("/shared-assets/images/examples/firefox-logo.svg"),
  #eeeeee 35% url("/shared-assets/images/examples/lizard.png");

<section id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  min-width: 100%;
  min-height: 100%;
  padding: 10%;
}

構成要素のプロパティ

このプロパティは以下の CSS プロパティの一括指定です。

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

リセットのみのサブプロパティ

このプロパティは、以下の CSS プロパティを初期値にリセットします。

• background-blend-mode

構文

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

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

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

/* 単一の画像、中央寄せかつ縮小 */
background: no-repeat center/80% url("../img/image.png");

/* グローバル値 */
background: inherit;
background: initial;
background: revert;
background: revert-layer;
background: unset;

値

<attachment>

background-attachment を参照。既定値は scroll です。

<visual-box>

background-clip および background-origin を参照。既定値はそれぞれ border-box および padding-box です。

<'background-color'>

background-color を参照。既定値は transparent です。

<bg-image>

background-image を参照。既定値は none です。

<bg-position>

background-position を参照。既定値は 0% 0% です。

<repeat-style>

background-repeat を参照。既定値は repeat です。

<bg-size>

background-size を参照。既定値は auto です。

解説

background 一括指定プロパティを使用すると、すべての CSS 背景プロパティを 1 つの宣言で指定することができます。背景は、要素のコンテンツの下に配置されます。カンマで区切られた複数の背景値がある場合、それぞれが 1 つの背景レイヤーとなり、前回のレイヤーの上に重ねて描画されます。

background プロパティは、カンマで区切られた 1 つ以上の背景レイヤーとして指定されます。それぞれのレイヤーには、0 個、1 個、2 個の <visual-box> 要素と、0 個または 1 個の <attachment>、<bg-image>、<bg-position>、<bg-size>、および <repeat-style> 要素を含めることができます。<bg-position>、<bg-size>、<repeat-style> 要素が 2 つ指定された場合、1 つ目の値は水平方向の値に設定され、2 つ目の値は垂直方向の値に設定されます。1 つの値だけが設定された場合は、その値が両方のサイズに適用されます。

<'background-color'> 要素は、指定された最後の背景レイヤーにのみ含めることができます。

background 一括指定プロパティの値の宣言で設定されていない要素のプロパティは、デフォルト値に設定されます。

成分プロパティの順序

一部の要素のプロパティは値の型が共通しているため、一括指定ではそれらのプロパティの順序が重要になります。

<bg-size> の値は、<bg-position> の後に、/ 文字で区切って記載することができます。例えば、10px 10px / 80% 80% という指定は、背景画像の高さと幅が要素の 80% となり、要素の左上角から上方向に 10px、左方向に 10px の位置に配置されることを意味します。<bg-position> 内で、両方の値が長さ単位の場合、または一方が長さ単位で他方が center の場合、1 つ目の値は水平位置を、2 つ目の値は垂直位置を参照します。

それぞれの背景レイヤーでは、<visual-box> の値を 0 個、1 個、2 個指定することができます。値が 1 個のみ指定された場合、background-origin と background-clip の両方が設定される。2 つの値が存在する場合、1 つ目の値が background-origin を、2 つ目の値が background-clip の値を指定します。<visual-box> の値が指定されていない場合、background-origin のデフォルトは padding-box、background-clip のデフォルトは border-box になります。

その他の背景プロパティについては順序の指定は必須ではありませんが、一貫性と可読性を高めるため、以下の順序を推奨します。なお、どの値も必須ではないことにご留意ください。

<bg-image> <bg-position> / <bg-size> <repeat-style> <attachment> <bg-clip> <bg-origin> <'background-color'>

以下の background は、すべてのデフォルト値をこの順序で明示的に設定します。

background: none 0% 0% / auto auto repeat scroll border-box padding-box
  transparent;

順序が異なっていても、以下の 3 行の CSS は上記と同じ効果があります。

background: none;
background: transparent;
background: repeat scroll 0% 0% / auto padding-box border-box none transparent;

画像の描画順

カンマ区切りで複数の背景が指定されている場合、それらは互いに重なり合う複数の背景レイヤーとして生成されます。リストの先頭にある背景が最上位レイヤーとなります。最上位レイヤーに透明な領域が含まれていない場合、表示されるのはこのレイヤーのみとなります。

最後のレイヤーは最下層のレイヤーです。背景色は常にこのレイヤーに含まれます。

文書全体に適用された本文の背景

文書の <html> :root 要素の計算された background-image の値が none で、その background-color が transparent の場合、ブラウザーは <body> 要素に設定された background スタイルを :root に引き継ぎ、<body> を background: initial が設定されているかのように扱います。言い換えれば、<html> 要素は <body> 要素に設定されたすべての background スタイルを取得し、<body> 要素の背景プロパティは初期値に設定されます。

この動作のため、仕様書の作成者は、文書の背景スタイルを html スタイルブロックではなく body スタイルブロックで設定することを推奨しています。ただし、抑制を使用するとこの動作が無効になる点に注意してください。<html> 要素または <body> 要素のいずれかで、contain プロパティが none 以外の何らかの値に設定されている場合、background プロパティおよびその個別指定プロパティの構成要素は、<body> 要素からルート要素である <html> 要素へ伝播されません。

公式定義

形式文法

background = 
  <bg-layer>#? , <final-bg-layer>  

<bg-layer> = 
  <bg-image>                      ||
  <bg-position> [ / <bg-size> ]?  ||
  <repeat-style>                  ||
  <attachment>                    ||
  <visual-box>                    ||
  <bg-clip>                       

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

<bg-image> = 
  <image>  |
  none     

<bg-position> = 
  <position>        |
  <position-three>  

<bg-size> = 
  [ <length-percentage [0,∞]> | auto ]{1,2}  |
  cover                                      |
  contain                                    

<repeat-style> = 
  repeat-x           |
  repeat-y           |
  repeat-block       |
  repeat-inline      |
  <repetition>{1,2}  

<attachment> = 
  scroll  |
  fixed   |
  local   

<visual-box> = 
  content-box  |
  padding-box  |
  border-box   

<bg-clip> = 
  <visual-box>             |
  [ border-area || text ]  

<background-color> = 
  <color>  

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

<position> = 
  <position-one>   |
  <position-two>   |
  <position-four>  

<position-three> = 
  [ left | center | right ] && [ [ top | bottom ] <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ top | center | bottom ]  

<length-percentage> = 
  <length>      |
  <percentage>  

<repetition> = 
  repeat     |
  space      |
  round      |
  no-repeat  

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<position-one> = 
  left                 |
  center               |
  right                |
  top                  |
  bottom               |
  x-start              |
  x-end                |
  y-start              |
  y-end                |
  block-start          |
  block-end            |
  inline-start         |
  inline-end           |
  <length-percentage>  

<position-two> = 
  [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ]  |
  [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ]  |
  [ block-start | center | block-end ] && [ inline-start | center | inline-end ]  |
  [ start | center | end ]{2}                         

<position-four> = 
  [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ]  |
  [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ]  |
  [ [ start | end ] <length-percentage> ]{2}          

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

アクセシビリティ

ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主にスクリーンリーダーにとって重要であり、スクリーンリーダーはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。

• MDN "WCAG を理解する ― ガイドライン 1.1 の解説"
• Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0

例

色キーワードと画像による背景の設定

HTML

<p class="top-banner">
  Starry sky<br />
  Twinkle twinkle<br />
  Starry sky
</p>
<p class="warning">これは段落です</p>
<p></p>

CSS

.warning {
  background: pink;
}

.top-banner {
  background: url("star-solid.gif") #99f repeat-y fixed;
}

結果

仕様書

ブラウザーの互換性

関連情報

• box-decoration-break
• グラデーションの使用
• 複数の背景の使用