CSS3: background プロパティ - 背景に関する一括指定

■ 概要

項  目説  明
記述形式 セレクタ {background: }
値 の形式 背景レイヤー,] 最終背景レイヤー
初 期 値 各プロパティの初期値を参照。
対応ブラウザー C1+ / e3+ / N4+ / Fx1+ / Op3.5+ / Ch1+ / Sa1+
適用可能な要素 すべての要素
継  承 しない

■ 解説

backgroundプロパティ は, 背景に関する一括指定 を行います。

半角カンマ( , )で区切って複数の背景レイヤーを指定することも可能です。  ただし,背景レイヤー最終背景レイヤー は,

  1. 背景レイヤー = [background-image] [[background-position [ / background-size]]
    background-repeat] [background-attachment] [ボックス

  2. 最終背景レイヤー = [background-image] [[background-position [ / background-size]]
    background-repeat] [background-attachment] [ボックス] [background-color

のように,background-imagebackground-position," / "+background-sizebackground-repeatbackground-attachmentbackground-color の6つのプロパティと ボックス の値を順不同で半角ブランクで区切って指定します。

ただし,ここで,ボックス の指定形式は,

  1. ボックス = 値1 値2,    値1background-origin値2background-clip の指定
  2. ボックス = ,    background-originbackground-clip の共通の指定

のどちらかで,下表のように,境界ボックス(border-box)パディングボックス(padding-box)コンテンツボックス(content-box)のいずれかを指定します。

 

さらに,background-colorプロパティ が指定できるのは, 最終背景レイヤー のみです。 また,background-size を 指定する場合には,background-position の指定が必要です。

説  明
background-image 背景画像の URL を指定します。
background-position 背景画像の 表示位置 を指定します。
background-size 背景画像の 表示サイズ を指定します。
background-repeat 背景画像の 繰り返し方法 を指定します。
background-attachment 背景画像の スクロール・固定 を指定します。
 ボックス  背景画像の 配置基準のボックスborder-boxpadding-boxcontent-box の3つから2つまたは1つ指定します。
background-originbackground-clip の値)
background-color 背景の を指定します。
備  考  ボックス  で,同じものを2つ指定した場合は,それを1つのみ指定した場合と同じになります。

これら6つのプロパティと ボックス は,background-size を指定した場合の background-position を除いて,どれも必須ではなく省略可能です。  そして,指定を省略したプロパティの値は初期値にリセットされます。

なお,各プロパティの値や指定方法の詳細については,それぞれの解説を参照してください。

■ 使用例1 ( background プロパティの利用)

次に示す例の指定内容は,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;
■■●●▲▲
□□◎◎△△
◇◇○○▽▽
sample
  【元の画像(×2/3)】

【注意】 Safari や Googole Chrome では, バグのため background プロパティの " / " をつけた background-size の指定には対応していません。 もし,この形式で background-size を指定した場合には,これらのブラウザーでは,背景の画像や色の表示が全く行われません。 (上の例をこれらのブラウザーで表示してみてください。)  この問題に対応するには,次のような対策が必要です。

  1. background プロパティの指定の際には,background-size は指定しない。
  2. background-size は,それに続いて background-size プロパティ で個別に指定する。

■ 使用例2 ( background プロパティの Safari や Chrome の動作を考慮した利用)

例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;
■■●●▲▲
□□◎◎△△
◇◇○○▽▽
sample
  【元の画像(×2/3)】

ただし,最後の sample 6 クラスの background-size の指定値 auto は初期値ですので,この指定は省略できます。

■ 備考

【参考ページ】