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>