background-imageプロパティ

TOPページに戻る > CSS

スポンサード リンク

background-imageプロパティ

html要素の背景画像を指定できます
background-imageのみの指定だと要素の背景を敷き詰めるだけです

使い方(書式)

セレクタ { background-image: url(url); }                                    

background-imageプロパティ

対応ブラウザ ie6 ie7 ie8 ie9 ie10 ie11 google Chrome safari fire fox opera
適用できる要素 全てのhtml要素
子要素へのスタイルの継承 しない

プロパティの値 説明
url(url) (url)に画像urlを指定
none 背景画像なし

実際の指定方法

p { 
 background-image: url(maru.gif);  /* 背景画像を指定 */
 height: 50px;                     /* 要素の高さを指定 */
 } 

p { background-image: none; }      /* 背景画像なし */

html部分

<p>背景画像が付いたp要素</p>

実際の表示

背景画像が付いたp要素

背景画像がないp要素


ファイルの階層を指定

違うフォルダ(ディレクトリ)に画像ファイルがある場合の指定方法
p { 
 background-image: url(../maru.gif);  /* 一つ上の階層のフォルダに画像がある場合 */
 height: 50px;                        /* 要素の高さを指定 */
 } 
p { 
 background-image: url(../hoge/maru.gif); /* 別のhogeフォルダに画像がある場合 */
 height: 50px;                          /* 要素の高さを指定 */
 width: 50px;                           /* 要素の横幅を指定(横幅も指定できます) */
 } 



(C)2012 ホームページ作成無料