CSS3: background-image プロパティ - 背景画像

■ 概要

項　　目説　　明
記述形式 セレクタ {background-image: url("画像ファイル") }
値 の形式 画像ファイルの URL
初 期 値
対応ブラウザー H3+ / e6+ / N2+ / Fx1+ / Op6+ / Ch1+ / Sa1+
適用可能な要素 すべての要素
継　　承 しない

■ 解説

background-imageプロパティ は，要素内の 背景の画像 を指定します。

画像を HTML 文書の単独の要素（インライン・イメージ）として表示する場合には，HTML の img要素を用いますが，背景画像の指定は，この background-imageプロパティを用いて，すべて CSS で行います。

なお，HTML4.01 までで使用されてきた background属性 は，HTML5 では廃止されました。　したがって，どの 要素 に対しても 属性 を使用して背景画像を設定することはできません ので注意してください。

■ 使用例（ background-image プロパティの利用）

HTMLソース
CSS
<head> ～ </head>		 
<style type="text/css" media="screen, handheld, print, tv" >
<!--
table.sample1 { 
   background-image: url(../logo.gif);
   background-position: center center;
   background-size: contain;
}
table.sample2 { 
   background-image: url(../logo.gif);
   background-position: center center;
   background-size: cover;
}
table.sample3 { 
   background-image: url(../logo.gif);
   background-position: center center;
   background-size: 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）】

■ 備考

一般的に、body要素 に背景画像を指定すると，ブラウザーではタイル状に敷き詰めた形で繰り返し背景画像が表示されます。　この表示形態を変更するには，background-repeat，background-position，background-attachment などの CSS プロパティを用います。

【参考ページ】