CSS 背景画像を指定するサンプル(background-image)

CSSの背景画像を指定するサンプルです。
background-imageプロパティまたはbackgroundプロパティを使用します。

background-image / background プロパティ

background-image : url ( "値" )
background : url ( "値" )
説明
画像のURL 画像のURLを指定します。
値を継承しない

コード

サンプルのコードです。
3,6行目は、background-imageプロパティを使用しています。
9行目は、backgroundプロパティを使用しています。

<style>
#box1{
	background-image:url(http://www.example.com/test/test1.png);
}
#box2{
	background-image:url(./images/test2.png);
}
#box3{
	background:url(http://www.example.com/test/test3.png);
}
#d1 div{width:200px;height:100px;border:1px solid #000;}
</style>
<body >
<div id="d1">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div>
</div>
</body>

関連の記事

CSS 背景色を指定するサンプル(background-color)
CSS 背景画像の繰り返し方法を指定するサンプル(background-repeat)
CSS3 枠線の角を丸くするサンプル(border-radius)
CSS3 ボックスに影をつけるサンプル(box-shadow)
CSS3 文字に影をつけるサンプル(text-shadow)
CSS3 透明度を指定するサンプル(opacity)
CSS3 線のグラデーションのサンプル(linear-gradient)
CSS3 円のグラデーションのサンプル(radial-gradient)




△上に戻る