背景に画像を指定するbackground-imageプロパティ
background-image

　背景に画像を指定できます。背景に画像を使用することで、デザインの幅が広がり、background-colorプロパティのみではできなかった表現が可能になります。

　ただし、ボタンやタイトルの背景を一枚画像として使用する場合は、このプロパティのみでなくbackgorund-repeatプロパティを使用し、背景の繰り返しを解除した方が安心です。

　逆に、コンテンツ全体に背景画像を指定したい場合、大きな画像を使用しなければならなくなってしまい、画像サイズが大きくなり、読み込みに時間がかかってしまいます。この場合は、可能であれば小さい画像を用意し、backgorund-repeatプロパティで背景画像を繰り返してタイルのように敷き詰めることで、画像サイズを小さくできます。

基本データ

構文 セレクタ{background-image:値;}
継承 ×
値
キーワードを使って指定する場合
url、none
親から継承させる場合
inherit
効果 背景に画像を指定できる
初期値 transparent
適用箇所 すべての要素

例

ほげほげですね。

p { background-image: url(../images/title.gif);}

動作Webブラウザ

Internet Explorer 5.5、6.0、7.0、8.0以上
Firefox 全バージョン
Safari全バージョン
Opera全バージョン
Chrome全バージョン
iPhone/iPad全バージョン

標準JavaScriptによるDOMでの参照方法

[window.]document.getElementById("【ID属性値】").style.backgroundImage

jQueryを使った参照方法

$('【セレクタ】').css('background-image','【値】');
$('【セレクタ】').css({'background-image':'【値】'});

CSSタグリファレンス インデックス

有限会社タグパンダ
喜安 亮介




HTML5 + UX フォーラム 新着記事
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

デザインハック 記事ランキング

本日 月間
＠IT