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

CSS で要素の背景画像を指定するには、background-image プロパティを使用します。 このプロパティはブロックレベル、インラインレベルのすべての要素に適用できます。

指定した背景画像は、ボックスの内容領域、パディング領域、ボーダー領域に適用され、 マージン領域は透明となります。

background-image プロパティの使用例


background-image: url("sample.png");
background-image: none;

表示する画像のURLを指定するか、表示しない場合は「none」を指定します。

背景画像を指定するサンプルコード

下のサンプルでは、div 要素(ブロックレベル)、span 要素(インラインレベル)に対して background-image プロパティを指定しています。

★ div要素に対して背景画像を指定

★ span要素に対して背景画像を指定

インラインレベルの要素にも背景画像を指定することができます。


<div class="sample1">
</div>

<p>インラインレベルの要素にも<span class="sample2">背景画像</span>を指定することができます。</p>

<style>
    div.sample1 {
        width: 400px;
        height: 150px;
        background-image: url("./ground-big.png");
    }
    
    span.sample2 {
        background-image: url("./ground-small.png");
    }
</style>

HTML・CSS入門