項 目 | 説 明 |
---|---|
記述形式 | セレクタ {background: 値 } |
値 の形式 | [ 背景レイヤー,] 最終背景レイヤー |
初 期 値 | 各プロパティの初期値を参照。 |
対応ブラウザー | C1+ / e3+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+ |
適用可能な要素 | すべての要素 |
継 承 | しない |
backgroundプロパティ は, 背景に関する一括指定 を行います。
半角カンマ( , )で区切って複数の背景レイヤーを指定することも可能です。 ただし,背景レイヤー と 最終背景レイヤー は,
のように,background-image,background-position," / "+background-size, background-repeat,background-attachment, background-color の6つのプロパティと ボックス の値を順不同で半角ブランクで区切って指定します。
ただし,ここで,ボックス の指定形式は,
のどちらかで,下表のように,境界ボックス(border-box),パディングボックス(padding-box),コンテンツボックス(content-box)のいずれかを指定します。
さらに,background-colorプロパティ が指定できるのは, 最終背景レイヤー のみです。 また,background-size を 指定する場合には,background-position の指定が必要です。
値 | 説 明 |
---|---|
background-image | 背景画像の URL を指定します。 |
background-position | 背景画像の 表示位置 を指定します。 |
background-size | 背景画像の 表示サイズ を指定します。 |
background-repeat | 背景画像の 繰り返し方法 を指定します。 |
background-attachment | 背景画像の スクロール・固定 を指定します。 |
ボックス | 背景画像の 配置基準のボックス を border-box,padding-box,content-box の3つから2つまたは1つ指定します。 (background-origin と background-clip の値) |
background-color | 背景の 色 を指定します。 |
備 考 | ※ ボックス で,同じものを2つ指定した場合は,それを1つのみ指定した場合と同じになります。 |
これら6つのプロパティと ボックス は,background-size を指定した場合の background-position を除いて,どれも必須ではなく省略可能です。 そして,指定を省略したプロパティの値は初期値にリセットされます。
なお,各プロパティの値や指定方法の詳細については,それぞれの解説を参照してください。
次に示す例の指定内容は,background-image プロパティ の 例 で示したものと同一ですが, 一括指定のため,記述はかなり簡単になっています。
HTMLソース | |
---|---|
CSS <head> ~ </head> |
<style type="text/css" media="screen, handheld, print, tv" > <!-- table.sample1 { background: url(../logo.gif) center center / contain; } table.sample2 { background: url(../logo.gif) center center / cover; } table.sample3 { background: url(../logo.gif) center center / auto; } --> </style> |
HTML <body> ~ </body> |
↓↓↓background-size: contain; <table border="1" class="sample1"> <tr><th>■■</th><th>●●</th><th>▲▲</th></tr> <tr><td>□□</td><td>◎◎</td><td>△△</td></tr> <tr><td>◇◇</td><td>○○</td><td>▽▽</td></tr> </table> <br>↓↓↓background-size: cover; <table border="1" class="sample2"> <tr><th>■■</th><th>●●</th><th>▲▲</th></tr> <tr><td>□□</td><td>◎◎</td><td>△△</td></tr> <tr><td>◇◇</td><td>○○</td><td>▽▽</td></tr> </table> <br>↓↓↓ background-size: auto; <table border="1" class="sample3"> <tr><th>■■</th><th>●●</th><th>▲▲</th></tr> <tr><td>□□</td><td>◎◎</td><td>△△</td></tr> <tr><td>◇◇</td><td>○○</td><td>▽▽</td></tr> </table> |
ブラウザー 表示例 | |||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
↓↓↓background-size: contain;
↓↓↓background-size: cover;
↓↓↓ background-size: auto;
【元の画像(×2/3)】 |
【注意】 Safari や Googole Chrome では, バグのため background プロパティの " / " をつけた background-size の指定には対応していません。 もし,この形式で background-size を指定した場合には,これらのブラウザーでは,背景の画像や色の表示が全く行われません。 (上の例をこれらのブラウザーで表示してみてください。) この問題に対応するには,次のような対策が必要です。
例1 の最後に書いた Safari や Chrome の動作の問題を考慮した background プロパティの利用として, 以下のような記述形式が考えられます。
HTMLソース | |
---|---|
<style type="text/css" media="screen, handheld, print, tv" > <!-- table.sample4 { background: url(../logo.gif) center center; background-size: contain; } table.sample5 { background: url(../logo.gif) center center; background-size: cover; } table.sample6 { background: url(../logo.gif) center center; background-size: auto; } --> </style> |
|
↓↓↓background-size: contain; <table border="1" class="sample4"> <tr><th>■■</th><th>●●</th><th>▲▲</th></tr> <tr><td>□□</td><td>◎◎</td><td>△△</td></tr> <tr><td>◇◇</td><td>○○</td><td>▽▽</td></tr> </table> <br>↓↓↓background-size: cover; <table border="1" class="sample5"> <tr><th>■■</th><th>●●</th><th>▲▲</th></tr> <tr><td>□□</td><td>◎◎</td><td>△△</td></tr> <tr><td>◇◇</td><td>○○</td><td>▽▽</td></tr> </table> <br>↓↓↓ background-size: auto; <table border="1" class="sample6"> <tr><th>■■</th><th>●●</th><th>▲▲</th></tr> <tr><td>□□</td><td>◎◎</td><td>△△</td></tr> <tr><td>◇◇</td><td>○○</td><td>▽▽</td></tr> </table> |
ブラウザー 表示例 | |||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
↓↓↓background-size: contain;
↓↓↓background-size: cover;
↓↓↓ background-size: auto;
【元の画像(×2/3)】 |
ただし,最後の sample 6 クラスの background-size の指定値 auto は初期値ですので,この指定は省略できます。