この記事は翻訳作業中です。
概要
background CSS プロパティは個々の背景関連プロパティの値を、スタイルシートの単一の場所で設定するショートハンドプロパティです。background は次のプロパティのうち一つ以上に対する値を設定するのに使うことができます: background-clip、background-color、background-image、background-origin、background-position、background-repeat、background-size、および background-attachment。
background CSS ショートハンドプロパティは、明示的に値を指定されたもの以外は初期値に設定します。
| 初期値 | 以下の各プロパティのショートハンドとして補完します:
|
|---|---|
| 適用対象 | 全要素. It also applies to ::first-letter and ::first-line. |
| 継承 | 不可 |
| 相対値の基準 | 以下の各プロパティのショートハンドとして補完します:
|
| メディア | visual |
| 計算値 | 以下の各プロパティのショートハンドとして補完します:
|
| Animation type | 以下の各プロパティのショートハンドとして補完します:
|
| 正規順序 | order of appearance in the formal grammar of the values |
構文
/* <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-color は最後の背景にしか定義できません。値
以下の値を一つ以上、任意の順に記述します:
<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>
<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> | 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-boxwhere
<image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient>
<length-percentage> = <length> | <percentage>where
<image()> = image( [ [ <image> | <string> ]? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>where
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )where
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = <color-stop>{2,}
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}where
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
<color-stop> = <color> <length-percentage>?
例
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
仕様
| 仕様書 | 策定状況 | コメント |
|---|---|---|
| CSS Backgrounds and Borders Module Level 3 background の定義 |
勧告候補 | ショートハンドプロパティが拡張され、複数の背景と新しい background-size、 background-origin と background-clip プロパティをサポートします。 |
| CSS Level 2 (Revision 1) background の定義 |
勧告 | 重要な変更なし |
| CSS Level 1 background の定義 |
勧告 |
ブラウザ実装状況
| 機能 | Firefox (Gecko) | Chrome | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| 基本サポート | 1.0 (1.7 or earlier) | 1.0 | 4.0 | 3.5 | 1.0 |
| 複数の背景 | 3.6 (1.9.2) | 1.0 | 9.0 | 10.5 | 1.3 |
| SVG 画像の背景への適用 | 4.0 (2.0) | 31.0 | 9.0 | 21.0 | 5.1 |
background-size のサポート |
18.0 (18.0) | 21.0 | 9.0 | 21.0 | 5.1 |
background-origin と background-clip のサポート |
22.0 (22.0) | 31.0 | 9.0 | 21.0 | 5.1 |
| 機能 | Firefox Mobile (Gecko) | Android | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| 基本サポート | 1.0 (1.9.2) | 2.1 | 10.0 | 5.0 | 3.2 |
| 複数の背景 | 1.0 (1.9.2) | 2.1 | 10.0 | 5.0 | 3.2 |
| SVG 画像の背景への適用 | 4.0 (2.0) | 3.0 | 10.0 | ? | 4.2 |
background-size のサポート |
18.0 (18.0) | 3.0 | 10.0 | (有) | 4.0 |
background-origin と background-clip のサポート |
22.0 (22.0) | 3.0 | 10.0 | 未サポート | 4.0 |
