background
==========

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

試してみましょう
--------

構成要素のプロパティ
----------

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

* `background-attachment`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-repeat`
* `background-size`
構文
--


```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");

/\* グローバル値 \*/
background: inherit;
background: initial;
background: revert;
background: unset;
```


`background` プロパティは1つまたは複数の背景レイヤーをカンマで区切って指定します。

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

* それぞれのレイヤーは、以下の値をそれぞれ 0 ～ 1 回含めることができます。
    + `<attachment>`
    + `<bg-image>`
    + `<position>`
    + `<bg-size>`
    + `<repeat-style>`
* `<bg-size>` の値は `<position>` の直後に '/' の文字で区切って含めなければなりません。例: "`center/80%`"
* `<box>` の値は 0 ～ 2 回含めることができます。1 回の場合は `background-origin` と `background-clip` の両方に設定されます。2 回の場合は、1 つ目は `background-origin` に、2 つ目は `background-clip` に設定されます。
* `<background-color>` の値は最後のレイヤーの指定でのみ含めることができます。
### 値

`<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` を参照。

アクセシビリティの考慮
-----------

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

* MDN "WCAG を理解する ― ガイドライン 1.1 の解説"
* Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0
公式定義
----

|  |  |
| --- | --- |
| 初期値 | 一括指定の次の各プロパティとして* `background-image`: `none`
* `background-position`: `0% 0%`
* `background-size`: `auto auto`
* `background-repeat`: `repeat`
* `background-origin`: `padding-box`
* `background-clip`: `border-box`
* `background-attachment`: `scroll`
* `background-color`: `transparent`
 |
| 適用対象 | すべての要素。 `::first-letter`および`::first-line` にも適用されます。 |
| 継承 | なし |
| パーセント値 | 一括指定の次の各プロパティとして* `background-position`: 背景配置領域の高さから背景画像の高さを引いた値に対する相対値。寸法は水平オフセットの幅と垂直オフセットの高さに対する相対値
* `background-size`: 背景配置領域に対する相対値
 |
| 計算値 | 一括指定の次の各プロパティとして* `background-image`: 指定通り、ただし `url` の値は絶対パスになる
* `background-position`: 一括指定の次の各プロパティとして
    + `background-position-x`: 絶対長とパーセント値の組み合わせで与えられるオフセットと原点のキーワードを、各項目として構成されるリスト。
    + `background-position-y`: 絶対長とパーセント値の組み合わせで与えられるオフセットと原点のキーワードを、各項目として構成されるリスト。
* `background-size`: 指定通り。ただし相対的な長さはは絶対的な長さに変換される
* `background-repeat`: 1 つの方向につき 2 つのキーワードで構成される項目のリスト
* `background-origin`: 指定通り
* `background-clip`: 指定通り
* `background-attachment`: 指定通り
* `background-color`: 色の計算値
 |
| アニメーションの種類 | 一括指定の次の各プロパティとして* `background-color`: 色
* `background-image`: 離散値
* `background-clip`: 反復可能リスト
* `background-position`: 反復可能リスト
* `background-size`: 反復可能リスト
* `background-repeat`: 離散値
* `background-attachment`: 離散値
 |

形式文法
----
```

background =   
  <bg-layer>#? , <final-bg-layer>    
  
<bg-layer> =   
  <bg-image>                      ||  
  <bg-position> [ / <bg-size> ]?  ||  
  <repeat-style>                  ||  
  <attachment>                    ||  
  <visual-box>                    ||  
  <visual-box>                      
  
<final-bg-layer> =   
  <bg-image>                      ||  
  <bg-position> [ / <bg-size> ]?  ||  
  <repeat-style>                  ||  
  <attachment>                    ||  
  <visual-box>                    ||  
  <visual-box>                    ||  
  <'background-color'>              
  
<bg-image> =   
  <image>  |  
  none       
  
<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 [0,∞]> | auto ]{1,2}  |  
  cover                                      |  
  contain                                      
  
<repeat-style> =   
  repeat-x                                     |  
  repeat-y                                     |  
  [ repeat | space | round | no-repeat ]{1,2}    
  
<attachment> =   
  scroll  |  
  fixed   |  
  local     
  
<visual-box> =   
  content-box  |  
  padding-box  |  
  border-box     
  
<image> =   
  <url>       |  
  <gradient>    
  
<length-percentage> =   
  <length>      |  
  <percentage>    
  
<url> =   
  <url()>  |  
  <src()>    
  
<url()> =   
  url( <string> <url-modifier>\* )  |  
  <url-token>                        
  
<src()> =   
  src( <string> <url-modifier>\* )    
  
```

例
-

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

#### HTML


```html
<p class="topbanner">
  Starry sky<br />
  Twinkle twinkle<br />
  Starry sky
</p>
<p class="warning">Here is a paragraph</p>
```


#### CSS


```css
.warning {
  background: pink;
}

.topbanner {
  background: url("starsolid.gif") #99f repeat-y fixed;
}
```


#### 結果

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

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