このサイトついて

このサイトではホームページを
作りたいという方のために、
HTML・CSSの解説
便利なソフト・本などの紹介
レンタルサーバの紹介
などを行っています。

背景に画像を指定をしたい

対応ブラウザ

背景に画像を指定をしたい場合は以下のプロパティで設定します。

背景画像指定のプロパティ

background-image:url(画像のURL);

■補足■
背景の繰り返しを指定する場合はbackground-repeat:■；で指定します。■の値は以下のとおりです。

　　　・no-repeat(画像を繰り返さずに1つだけ指定)
　　　・repeat-x(画像を横方向に敷き詰める)
　　　・repeat-y(画像を縦方向に敷き詰める)
　　　※repeat-xなどで画像が敷き詰められない部分には、背景色が表示されます。

例

ソース


----------------CSS----------------
body{
	background-image:url(../img/back1.gif);*背景画像を指定*/
}
div.samp1{
	background-image:url(../img/back2.gif);*背景画像を指定*/
	background-repeat:repeat-x;/*横方向に敷き詰める*/
	background-color:#ffffff;
	width:400px;
	height:400px;
	float:left;
}
div.samp2{
	background-image:url(../img/back3.gif);*背景画像を指定*/
	background-repeat:repeat-y;/*縦方向に敷き詰める*/
	background-color:#ffffff;
	width:400px;
	height:400px;
	float:left;
}
----------------HTML----------------
<body>

<div class="samp1">
横方向に敷き詰める。
</div>

<div class="samp2">
縦方向に敷き詰める。
</div>

</body>

↓

ブラウザ上の表示
サンプルページをご覧ください
※サンプルページでは見やすいように一部ソースを追加してる場合があります。

戻る

このサイトついて

SPONSORED LINK

背景に画像を指定をしたい