[CSS]背景画像を重ねて、面白い効果をだすスタイルシート

二枚の背景画像を重ねて、面白い効果をだすスタイルシートをCSS TRICKSから紹介します。

Blurry Background Effect
demo

仕組みは、くっきり画像とぼんやり画像の二枚を背景画像として指定し、ぼんやり画像を内包エリアにfixedで指定します。

body{
	background: url(images/bg-solid.jpg) no-repeat;
}

#page-wrap{
	background: url(images/bg-blurry.jpg) no-repeat fixed;
	width: 500px; margin: 40px auto;
}

ブラウザのサイズを小さくしても、タイトルのある白いぼんやりエリアはくっきり画像と自然に重なって表示されます。

fixedを使用しているため、IE6など対応していないブラウザでは意図通りに表示されません。

Post on:2008年12月24日