【background-image】背景に画像を指定

background-imageプロパティでは、要素に背景画像を設定することができます。 指定した背景画像は、パディングを含むボックス内容の領域、ボーダーの領域に適用されます。

またマージンの領域は常に透明となりますので、親要素のボックス内容が透けて見えている状態になります。

表示したい背景画像は、値にurlで指定して下さい。 指定した画像はタイル状に繰り返されて表示されます。並び方、繰り返しの有無などはbackground-repeatプロパティなどで設定できます。

なおユーザーの環境によっては、指定した背景画像が表示されない場合もありますので、背景色(background-color)も同時に設定するようにして下さい。 これは背景色の上に背景画像が表示されるためです。 そのため背景画像が利用可能な場合は、前面に背景画像が表示されます。 画像の透明な部分、または透過した場合であれば、そこの部分に背景色が透けて見えるようになります。

また背景画像が利用できない場合であれば、背景色が表示されるようになります。

書式

  • background-image : ……… 背景画像を指定する

★:url("画像のurl")、none、inherit

URI
表示させたい画像のurlを指定。指定方法については絶対パス・相対パスを参照
none
画像を表示しない(初期値)

使用した時の例

.sample1 {
  background-color:#FAF9F6;
  background-image:url("sample.jpg");
}
<div class="sample1">指定した背景画像が表示されます。</div>

ブラウザ上の表示例

指定した背景画像が表示されます。

対応ブラウザなどのデータ

初期値 none 値の継承 継承しない
適用可能な要素 すべての要素
メディア visual
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera3.5~ , Safari1~

関連情報