logo

その他にもどる

背景の指定

背景に画像を使う場合のことを掲載

下のように、左の3枚の画像を使って、右のようなページを作る場合は、 

@charset "Shift_JIS";

* {margin:0; padding:0;} 

body {text-align:center;}

#page-body {
	width:840px;
	background-image:url("page.jpg");
	background-repeat:repeat-y;
}

#header {
	height:100px;
	background-image:url("header.jpg");
}

#mainpage {

}

#footer {
	height:36px;
	background-image:url("footer.jpg");
}
height　は　画像の高さ
背景を画像にする場合は　#page-body　に　page.jpg　という画像を敷き詰め、その上に　header.jpg　と　footer.jpg　を乗せる、と考えればよい

background-repeat:repeat-y;　は　画像を縦方向にのみ繰り返す、という意味で、
もし　background-repeat:no-repeat;　だと繰り返さない　指定がない場合は縦横に繰り返す

同じ構文でも、左の3枚の画像であれば、右のようなページになる


---- End ----

↑PageTop　その他にもどる