ホーム>コース別ガイド一覧>背景画像を固定しよう!
背景画像を固定しよう!(background-attachment プロパティ) |
|
使用プロパティ セレクタ { background-attachment: 固定; }
CSS一覧プロパティ辞典 … background-attachment プロパティ
background-attachment プロパティを使うと、ブラウザをスクロールしても背景画像を固定することができます。値にはfixed(固定する)や、scroll(スクロールする)を指定できます。
使用例
background-attachment プロパティを使用して値を「fixed」とし、ブラウザをスクロールしたときに背景画像を固定したように見せましょう!
body 要素に背景画像を表示しますので、セレクタに body 要素を入力し background-image プロパティを指定します。その際、background-position プロパティを使用し値を「center center」として背景画像をWebページ中央に配置しています。さらに、画像は同じフォルダ内のファイルを参照するとして、相対パスで指定しているので、ファイル名(ここでは「haikei1.gif」)をそのまま記述します。なお、使用画像は下の画像を使用しています。
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
<style type="text/css">
body {
background-color: moccasin;
background-imege: url(haikei1.gif);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
p {
line-height: 1.7em;
}
</style>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
ワンポインを紹介します!</p>
<p>おいしいチャーハンの作り方</p>
省略
</body>
</html>
|
|
使用例の表示
ブラウザの表示例はこちらに表示しています。このように背景画像が中央に表示され、スクロールしても固定されているように見えます!