ヘッダー部分とかグリッドレイアウトを飛び出しているように作る方法
海外のサイトとかでよく見られるんですが、背景画像がドーンと大きく置いてあり、その上にコンテンツがあるようなサイトがあるかと思います。
代表的なサイトと言えばWeb Designer Wallさんが有名だと思いますが、この用なサイトも背景画像さえ出来ればけっこう簡単に出来ちゃうんで、その組み方を解説したいと思います。
グリッドレイアウトを飛び出しているように作る解説
まず最初にbodyの背景画像やカラーを指定しておきます。
CSS
body {
margin:0; padding:0;
background: #6C8EBC url(image/body.jpg) repeat-x;
text-align: center;
}
その上に背景画像やコンテンツをのせていくって感じです。
CSS
#page {
background: url(image/page.jpg) no-repeat top center;
padding: 140px 0 30px;
}
それ以外に記述されている部分はコンテンツ見栄えを整える為に記述しているだけです。
ありがとうございます！
2009年03月09日 04:07