cssで｢background-attachment: fixed;｣

webのコト
春らしくイチゴを起用♪

縦長に長いサイトを、下にスクロールさせて行っても常に同じ位置にロゴを表示させておく方法です。
思ったよりお手軽に出来ました。


何も素材の無い中で長文が思いつかなかったため、わざとウィンドウを小さくしてスクロールバーを
表示させてしまいました^^;

HTML,cssはこんな風に。

<title>ロゴやキャラクターを常に表示</title>
<style type="text/css">
body {
	background-image: url(strawberry-1.jpg);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-attachment: fixed;
	background-color: #FFFFFF;
	height: 100px;	
}

h1 {
	font-size: large;
	color: #006600;
	background-color: #FF99FF;
	padding: 5px;
}

p {
	line-height: 160%;
}

</style>
</head>

<body>
<h1>ロゴやキャラクターを常に表示</h1>
<p>
ページがスクロールされても、ウィンドウ内の常に同じ位置にロゴやマスコットが表示されていると、訪問者にサイトのイメージを強く意識させることが出来ます。<br />
邪魔にならない程度の大きさでページの端に表示させておくことで、個性を出すことが出来るでしょう。<br />ページを読む邪魔になると逆効果なので、小さめの画像を使いましょう。<br />
ロゴを常に表示させておくには、background-repeat,background-position,<br />background-attachmentの３つのプロパティを使って背景画像の表示位置を制御します。<br />
<br />
今回は春ということもあって、イチゴをつけてみました♪</p>
</body>
</html>