背景を付ける
ホームページの背景に画像や色を指定するCSSを見ていきます。
背景の指定にはページに対する背景とボックス単位での背景の指定があります。
ページに背景色を付ける
ページに背景色を付けるには<body>タグに class,idを指定するかbody を指定してCSSを記述します。
背景に色をつけるにはbackground-colorプロパティを使い、値に色を指定します。
<head>
<style type="text/css">
<!--
#bg{
background-color:green;
}
-->
</style>
<head>
<body id="bg">
</body>
</html>
IDでの指定は上記のとうりです。bodyに直接指定するのも結果は同じです。
<head>
<style type="text/css">
<!--
body{
background-color:green;
}
-->
</style>
<head>
<body>
</body>
</html>
ページに背景を付けるのであればidで指定（一度しか使わないので）かbodyに指定が一般的です。
ボックスに背景色を付ける
『レイアウトのためのボックス』
で作ったようなボックスに背景色を付けてみましょう。
背景色の指定はボックスを作るときに作るclassやid
に一緒に書き込むことができます。
<head>
<style type="text/css">
<!--
.box{
height:150px;
width:300px;
background-color:red;
}
-->
</style>
<head>
<body>
<div class="box">ボックスの背景色</div>
</body>
</html>
高さ400px、横幅200pxのボックスを作り背景色を青に指定したボックスを作ってみましょう。
CSS
.box{width:200px;
height:400px;
background-color:blue;
}
HTML
<div class="box"></div>ページの背景に画像を付ける
ページの背景に色ではなく画像を付けてみましょう。背景に画像を付けるには
background-imageのプロパティを使い、
値にurl(画像のURL)を記入します。
では背景の画像は
この桜の画像を使いましょう。
画像のURLは./img/bg_sakura.jpgです。
<head>
<style type="text/css">
<!--
body{
background-imgae:url(./img/bg_sakura.jpg);
}
-->
</style>
<head>
<body>
</body>
</html>
小さい桜の画像が背景一面に配置されました。ではちょっと大きめの写真を背景に配置してみましょう。
画像は
この画像を使います。実際のサイズは600x448なのでこれより大きい画像になります。
URLは./img/bg_image.jpgです。
<head>
<style type="text/css">
<!--
body{
background-imgae:url(./img/bg_image.jpg);
}
-->
</style>
<head>
<body>
</body>
</html>
桜のイラストの時は一面に配置されてよい感じでしたが画像の場合は繰り返しがない方がしっくり来る時があります。
そのような場合のときは繰り返しを無くすCSSがあります。繰り返しを設定するにはbackground-repeat
プロパティを使い値は以下のようになります。
- repeat
- 画面いっぱいに敷き詰める。※通常はこれになります
- repeat-x
- 横方向にだけ繰り返します。
- repeat-y
- 縦方向にだけ繰り返します。
- no-repeat
- 繰り返さず１つだけ表示します。
では繰り返しをせず1枚のみ表示してみましょう
<head>
<style type="text/css">
<!--
body{
background-imgae:url(./img/bg_image.jpg);
background-repeart:no-repeart;
}
-->
</style>
<head>
<body>
</body>
</html>
繰り返しを無しにしたページでスクロールすると画像も一緒にスクロールし消えてしまいます。 そのようなときに画像を固定することができます。background-attachmentプロパティで、値は fixedを使います。
<head>
<style type="text/css">
<!--
body{
background-imgae:url(./img/bg_image.jpg);
background-repeart:no-repeart;
background-attachment:fixed;
}
-->
</style>
<head>
<body>
</body>
</html>
スクロールしても画像が固定されたと思います。では画像の表示する位置を変えてみましょう。通常は左端から表示されますが 右端、上、下と表示位置を指定することができます。background-positionプロパティで、値に top、bottom、left、right、center、 かpxでのピクセル指定があります。指定方法は水平方向の位置、垂直方向の位置を指定出来ます。
background-position:★;
background-position:★ ☆;
★が水平方向の位置、☆が垂直方向の位置になります。
<head>
<style type="text/css">
<!--
body{
background-imgae:url(./img/bg_image.jpg);
background-repeart:no-repeart;
background-position:center 50px;
}
-->
</style>
<head>
<body>
</body>
</html>