コンテンツメイン
なんか …
トップにデイジーを 張り付ければ プッシング・デイジー 恋するパイメーカー みたいな …
背景を使用した テンプレートの元
gooブログのデザイン一覧のスポーツを参考に 複数背景画像の配置を 試した。
bodyに芝生画像を設定して containerに 背景上部を 設定した。
ヘッダー部、フッター部などに画像を使用する 通常のレイアウトと違って シンプルな構造を 表現できる？と思う。
・bodyに 芝生 background 設定
・containerに ヘッダー(上部)の background 設定
半透明 フィルター (CSS 演習)
参 考 ： WEBデザイン BLOG
<pre>に設定。
background-color: #055; filter: alpha(opacity=65); -moz-opacity:0.65; opacity:0.65;
背景を左右半々に表示する (CSS メモ)
参 考 ： 背景画像を半々に表示するスタイルシート コリス
■ bodyとdivの場合
html
<body>
<div id="rightHalf"></div>
</body>
css
* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body { background: url(images/bg-1.jpg); }
#rightHalf {
background: url(images/bg-2.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
}
■ divとdivの場合
html
<body>
<div id="leftHalf"></div>
<div id="rightHalf"></div>
</body>
css
#leftHalf {
background: url(images/bg-1.jpg);
width: 50%;
position: absolute;
left: 0px;
height: 100%;
}
#rightHalf {
background: url(images/bg-2.jpg);
width: 50%;
position: absolute;
right: 0px;
height: 100%;
}
2009年 08月 08日 更新
