CSS 背景2
みなさまはヘッド部分（タイトル部分）に背景画像は何枚くらい使えるかわかりますか？
基本的に背景画像は１つのセレクタに１つしか設定できません
ですのでブログの右と左に別の背景を設定することは不可能です
ただこんな画像ならなんとか・・・・
このブログは右はピンクのチェックで左はブルーのチェック柄の背景です
種明かしは・・・・
ブログの一番下を見ればわかるのですが
このような左右違う柄の１つの画像を縦に繰り返しで配置しています
body {
background-image:url(画像のＵＲＬ);
background-repeat:repeat-y ;/*縦に繰り返し*/
background-position:center top;
}
縦に配置しますので画像の横幅はじゅうぶんな長さにしないと
大きな解像度で見た場合は左右に画像の無い部分が出来てしまいます
次はページの上に大きな画像を配置してみます
やはり解像度の大きな画面で見られてもいいように横幅の大きな画像を使います
body{
color:#ffa500;
background-color:#351901; /*背景色*/
background-image:url(画像のＵＲＬ); /*背景に画像*/
background-repeat:no-repeat ;/*繰り返さない*/
background-position:center top;/*左下に配置*/
}
#frame,
#sub_a,
#sub_b{
background-color:transparent;/*背景色を透明*/
}
div#footerArea{
background-color:transparent;/*背景色を透明*/
border:none;/*線を消す*/
}
つぎは立体感を出すためにヘッド部分に４枚の画像を重ねてみます
Flashを使えばいいじゃん～・・・って～のはなしで
間に合わせで画像を作っていますのでうまく透過できていませんし・・・動きも・・・・・
センスがないのが露見してしまいますが・・・・・
bodyに設定している画像
#subFrameに設定している画像
#headerに設定している画像
このほかにもまだ＃userNaviAreaや#frameにも配置できます・・・
このように何枚も重ねる場合は透過処理をしないと下の画像が表示できません
body{
color:#FF9900;
background-color:#000000; /*背景色*/
background-image:url(背景画像--富士山);/*背景に画像*/
background-repeat:no-repeat ;/*繰り返さない*/
background-position:center top;
}
#subFrame{
background-image:url(中の画像--東京タワー);/*背景に画像*/
background-repeat:no-repeat ;/*繰り返さない*/
background-position:center top;
}
#overHeader{
height:300px;
background-image:url(手前の画像--ビル);/*背景に画像*/
background-repeat:no-repeat ;/*繰り返さない*/
background-position:center top;
}
#frame,
#sub_a,
#sub_b{
background-color:transparent;/*背景色を透明*/
}
#header{
height:115px;
background-color:transparent;
background-image:url(背景画像--UFO);/*背景に画像*/
background-repeat:no-repeat ;/*繰り返さない*/
background-position:center top;
}
#header h1,
#header h1 a{
color:#ffffff;
font-size:20px;
}
#header h2{
color:#ffffff;
}
div#footerArea{
background-color:transparent;/*背景色を透明*/
border:none;/*線を消す*/
}
今回はヘッド部分を紹介していますが・・・
このように背景画像を置ける場所は何ヶ所もあります
探してみてください