Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームコース別ガイド一覧>背景画像を固定しよう!

背景画像を固定しよう!(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>

使用例の表示

ブラウザの表示例はこちらに表示しています。このように背景画像が中央に表示され、スクロールしても固定されているように見えます!

関連情報ページ

CSS一覧プロパティ辞典

その他

ロゴ
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system