１４．背景イメージのスタイル
背景イメージのスタイルシートは、ホームページに表示するエレメントの背景のイメージと、
＜ｂｏｄｙ＞要素の背景イメージの設定になる。
素材のダウンロード：トップ（上）のイメージ（ue.gif）
間のイメージ（naka.gif）
下のイメージ（sita.gif） この三つの素材のリンクを右クリックしてダウンロードして使ってください。
１）エレメントの背景のイメージを設定する。
＜書式＞background-image:url("リンクするイメージファイルのパスとファイル名") ;
＜例＞<html>
<head>
<title>背景イメージ指定する。</title>
<style type="text/css">
<!--
.backimage1{background-image:url(images/ue.gif);
font-size:24px;
}
-->
</style>
</head>
<body>
<div class="backimage1">自由に作文してみてください。</div>
</body>
</html>
＜表示例＞
２）背景画像を繰り返さないようにする。
１）の例では、横方向に画像が繰り返しているので、この繰り返しを制御する。
＜書式＞background-repeat:repeat 画像を横方向に繰り返し表示する
background-repeat:no-repeat 画像を繰り返さない。
background-repeat: repeat-x 横方向のみ繰り返す。
background-repeat:
repeat-y 縦方向のみ繰り返す。
＜例＞<html>
<head>
<title>背景イメージをリピートなしで指定する。</title>
<style type="text/css">
<!--
.backimage2{background-image:url(images/ue.gif);
background-repeat:no-repeat;
font-size:24px;
}
-->
</style>
</head>
<body>
<div class=backimage2">自由に作文してみてください。</div>
</body>
＜表示例＞
＜課題＞以下の日記のようなホームページを作りなさい。
３）＜ｂｏｄｙ＞要素の属性を定義して背景イメージを変える。
背景イメージは、著作権フリーの画像をネットからとってきてね。
画像サイズは、２００X２００ピクセルぐらいのものがわかりやすいと思います。
①背景イメージを縦横に繰り返し表示する。（デフォルト）
＜書式＞background-image:url("リンクするイメージファイルのパスとファイル名") ;
＜例＞<html>
<head>
<title>背景イメージを縦横に繰り返し表示する。</title>
<style type="text/css">
<!--
body{background-image:url(images/backimage1.jpg);
}
-->
</style>
</head>
<body>
<div>今夜も夜は、ふけてきた。</div>
</body>
</html>
＜表示例＞
②背景イメージを横方向にのみ繰り返す。
＜書式＞background-repeat:repeat-x;
＜例＞<html>
<head>
<title>背景イメージを横方向にのみ繰り返し表示する。</title>
<style type="text/css">
<!--
body{background-image:url(images/backimage1.jpg);
background-repeat:repeat-x;
}
-->
</style>
</head>
<body>
<div>今夜も夜は、ふけてきた。</div>
</body>
</html>
＜表示例＞
③背景イメージを縦方向にのみ繰り返す。
＜書式＞background-repeat:repeat-y;
＜例＞<html>
<head>
<title>背景イメージを縦方向にのみ繰り返し表示する。</title>
<style type="text/css">
<!--
body{background-image:url(images/backimage1.jpg);
background-repeat:repeat-y;
}
-->
</style>
</head>
<body>
<div>今夜も夜は、ふけてきた。</div>
</body>
</html>
＜表示例＞
④背景イメージを繰り返さずに表示する。
＜書式＞background-repeat:no-repeay;
＜例＞<html>
<head>
<title>背景イメージを縦方向にのみ繰り返し表示する。</title>
<style type="text/css">
<!--
body{background-image:url(images/backimage1.jpg);
background-repeat:no-repeat;
}
-->
</style>
</head>
<body>
<div>今夜も夜は、ふけてきた。</div>
</body>
</html>
＜表示例＞
⑤背景色を設定する。
＜書式＞
background-color:色;
＜例＞<html>
<head>
<title>背景色を設定する。</title>
<style type="text/css">
<!--
body{background-image:url(images/backimage1.jpg);
background-repeat:no-repeat;
background-color:pink;
}
-->
</style>
</head>
<body>
<div>今夜も夜は、ふけてきた。</div>
</body>
</html>
＜表示例＞
⑥背景イメージ表示位置を設定する。
＜書式＞background-position:左からの％ 上からの％;
background-position:左からのピクセル 上からのピクセル;
background-position:left; 左寄せ
background-position:center; 中央寄せ
background-position:right; 右寄せ
background-position:top; 上寄せ
background-position:bottom; 下寄せ
＜例＞<html>
<head>
<title>背景イメージ表示位置を設定する。</title>
<style type="text/css">
<!--
body{background-image:url(images/backimage1.jpg);
background-repeat:no-repeat;
background-color:pink;
}
-->
</style>
</head>
<body>
<div>今夜も夜は、ふけてきた。</div>
</body>
</html>
＜表示例＞
⑦背景画像の固定／非固定の設定をする。
＜書式＞background-attachment:fixed; 画像を固定する。
background-attachment:fixed; 画像を固定しない。
＜例１＞<html>
<head>
<title>背景イメージを固定する。</title>
<style type="text/css">
<!--
body{background-image:url(images/backimage1.jpg);
background-repeat:no-repeat;
background-color:pink;
background-attachment:fixed;
}
-->
</style>
</head>
<body>
<div>今夜も夜は、ふけてきた。</div><br>・・・・・<br> ＜ｂｒ＞を５０個ぐらい書く。
</body>
</html>
＜表示例＞
＜例２＞<html>
<head>
<title>背景イメージを固定しない。</title>
<style type="text/css">
<!--
body{background-image:url(images/backimage1.jpg);
background-repeat:no-repeat;
background-color:pink;
background-attachment:scroll;
}
-->
</style>
</head>
<body>
<div>今夜も夜は、ふけてきた。</div><br>・・・・・<br> ＜ｂｒ＞を５０個ぐらい書く。
</body>
</html>
＜表示例＞
