{{CSSRef("CSS Background")}}
概要
background
CSS プロパティは個々の背景関連プロパティの値を、スタイルシートの単一の場所で設定するショートハンドプロパティです。background
は次のプロパティのうち一つ以上に対する値を設定するのに使うことができます: {{cssxref("background-clip")}}、{{cssxref("background-color")}}、{{cssxref("background-image")}}、{{cssxref("background-origin")}}、{{cssxref("background-position")}}、{{cssxref("background-repeat")}}、{{cssxref("background-size")}}、および {{cssxref("background-attachment")}}。
background
CSS ショートハンドプロパティは、明示的に値を指定されたもの以外は初期値に設定します。
{{cssinfo}}
構文
/* <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");
補足: 要素全体に対して背景色は一つだけなので、{{cssxref("background-color")}} は最後の背景にしか定義できません。
値
以下の値を一つ以上、任意の順に記述します:
<attachment>
- {{cssxref("background-attachment")}} を参照
<box>
- {{cssxref("background-clip")}} を参照
<background-color>
- {{cssxref("background-color")}} を参照
<bg-image>
- {{Cssxref("background-image")}} を参照
<position>
- {{cssxref("background-position")}} を参照
<repeat-style>
- {{cssxref("background-repeat")}} を参照
<bg-size>
- {{cssxref("background-size")}} を参照。このプロパティは必ず <position> の後に、文字 '/' で区切って指定しなければなりません。
形式文法
{{csssyntax}}
例
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
{{EmbedLiveSample("%E4%BE%8B")}}
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}} | {{Spec2('CSS3 Backgrounds')}} | ショートハンドプロパティが拡張され、複数の背景と新しい {{cssxref("background-size")}}、 {{cssxref("background-origin")}} と {{cssxref("background-clip")}} プロパティをサポートします。 |
{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}} | {{Spec2('CSS2.1')}} | 重要な変更なし |
{{SpecName('CSS1', '#background', 'background')}} | {{Spec2('CSS1')}} |
ブラウザ実装状況
{{CompatibilityTable}}
機能 | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
基本サポート | {{CompatGeckoDesktop("1.0")}} | 1.0 | 4.0 | 3.5 | 1.0 |
複数の背景 | {{CompatGeckoDesktop("1.9.2")}} | 1.0 | 9.0 | 10.5 | 1.3 |
SVG 画像の背景への適用 | {{CompatGeckoDesktop("2.0")}} | 31.0 | 9.0 | 21.0 | 5.1 |
{{cssxref("background-size")}} のサポート | {{CompatGeckoDesktop("18.0")}} | 21.0 | 9.0 | 21.0 | 5.1 |
{{cssxref("background-origin")}} と {{cssxref("background-clip")}} のサポート | {{CompatGeckoDesktop("22.0")}} | 31.0 | 9.0 | 21.0 | 5.1 |
機能 | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
基本サポート | {{CompatGeckoMobile("1.9.2")}} | 2.1 | 10.0 | 5.0 | 3.2 |
複数の背景 | {{CompatGeckoMobile("1.9.2")}} | 2.1 | 10.0 | 5.0 | 3.2 |
SVG 画像の背景への適用 | {{CompatGeckoMobile("2.0")}} | 3.0 | 10.0 | {{CompatUnknown}} | 4.2 |
{{cssxref("background-size")}} のサポート | {{CompatGeckoMobile("18.0")}} | 3.0 | 10.0 | {{CompatVersionUnknown}} | 4.0 |
{{cssxref("background-origin")}} と {{cssxref("background-clip")}} のサポート | {{CompatGeckoMOBILE("22.0")}} | 3.0 | 10.0 | {{CompatNo}} | 4.0 |
{{EmbedCompatTable("web-css-background")}}
関連情報
- {{cssxref("-moz-background-inline-policy")}}
- グラデーションの利用
- 複数の背景