blob: 8b1ede21723bf6d130083bb0d4460761f6733407 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
---
title: background
slug: Web/CSS/background
tags:
- CSS
- CSS 背景
- CSS プロパティ
- リファレンス
- recipe:css-shorthand-property
browser-compat: css.properties.background
translation_of: Web/CSS/background
---
{{CSSRef("CSS Background")}}
**`background`** は [CSS](/ja/docs/Web/CSS) の[一括指定](/ja/docs/Web/CSS/Shorthand_properties)プロパティで、色、画像、原点と寸法、反復方法など、背景に関するすべてのスタイルプロパティを一括で設定します。
{{EmbedInteractiveExample("pages/css/background.html")}}
## 構成要素のプロパティ
このプロパティは以下の CSS プロパティの一括指定です。
- {{cssxref("background-attachment")}}
- {{cssxref("background-clip")}}
- {{cssxref("background-color")}}
- {{cssxref("background-image")}}
- {{cssxref("background-origin")}}
- {{cssxref("background-position")}}
- {{cssxref("background-repeat")}}
- {{cssxref("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 回の場合は {{cssxref("background-origin")}} と {{cssxref("background-clip")}} の両方に設定されます。2 回の場合は、1 つ目は {{cssxref("background-origin")}} に、2 つ目は {{cssxref("background-clip")}} に設定されます。
- `<background-color>` の値は最後のレイヤーの指定でのみ含めることができます。
### 値
- `<attachment>`
- : {{cssxref("background-attachment")}} を参照
- `<box>`
- : {{cssxref("background-clip")}} および {{cssxref("background-origin")}} を参照
- `<background-color>`
- : {{cssxref("background-color")}} を参照
- `<bg-image>`
- : {{Cssxref("background-image")}} を参照
- `<position>`
- : {{cssxref("background-position")}} を参照
- `<repeat-style>`
- : {{cssxref("background-repeat")}} を参照
- `<bg-size>`
- : {{cssxref("background-size")}} を参照。
## アクセシビリティの考慮
ブラウザーは、背景画像に関する特別な情報を支援技術に提供しません。これは主に画面リーダーにとって重要であり、画面リーダーはその存在を告知しないため、ユーザーには何も伝えません。ページの全体的な目的を理解する上で重要な情報が画像に含まれている場合は、文書の中でその意味を記述した方が良いでしょう。
- [MDN "WCAG を理解する ― ガイドライン 1.1 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.1_%e2%80%94_providing_text_alternatives_for_non-text_content)
- [Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html)
## 公式定義
{{cssinfo}}
## 形式文法
{{csssyntax}}
## 例
<h3 id="Setting_backgrounds_with_color_keywords_and_images">色キーワードと画像による背景の設定</h3>
#### 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;
}
```
#### 結果
{{EmbedLiveSample("Setting_backgrounds_with_color_keywords_and_images")}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{cssxref("box-decoration-break")}}
- [グラデーションの使用](/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
- [複数の背景の使用](/ja/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds)
|
