CSS 背景・・・
また背景についての質問が多くなってきました・・・
背景のＣＳＳは以下を組み合わせて指定します
background-color 背景色
background-image 背景に画像
background-repeat 繰り返しを指定
background-attachment 背景画像の固定とスクロール
background-position 背景画像の位置
このブログのように背景にグレイの色を指定する場合は
body{
background-color:#cccccc; /*背景色*/
}
画像を敷き詰める場合は
body{
background-image:url(画像のＵＲＬ);/*背景に画像*/
}
画像を横方向にだけ繰り返す場合は
body{
background-image:url(画像のＵＲＬ);/*背景に画像*/
background-repeat:repeat-x;/*ヨコに繰り返し*/
}
画像を縦方向にだけ繰り返す場合は
body{
background-image:url(画像のＵＲＬ);/*背景に画像*/
background-repeat:repeat-y;/*タテに繰り返し*/
}
画像を1つだけ配置する場合は
body{
background-image:url(画像のＵＲＬ);/*背景に画像*/
background-repeat:no-repeat ;/*繰り返さない*/
}
画像を１つだけ左下に配置
body{
background-image:url(画像のＵＲＬ);/*背景に画像*/
background-repeat:no-repeat ;/*繰り返さない*/
background-position: left bottom;/*左下に配置*/
}
↑上はわかりやすいようにサイドバー、メインを表示していませんが
↓実際のブログではブログに下に隠れてしまう場合があります
見ている方のディスプレイの解像度によっても見え方は違います
そこでframeと左サイドバーの背景色を透明にします
※この場合右サイドは関係ありませんが背景を右下に変更する場合もあるかもなのでついでに右サイドも透明にしてみます
#frame,
#sub_a,
#sub_b{
background-color:transparent;/*背景色を透明*/
}
スキンによっては、あるいはすでに別の背景を設定している場合は
これだけでは消えない場合もあります
スキンによってはフッターエリアがジャマになる場合があります
#footerArea{
background-color:transparent;/*背景色を透明*/
border:none;/*線を消す*/
}
背景色をグレイ
背景画像（透過）を左下に１つだけ配置
スクロールしても左下に固定
・・・・の、場合
body{
background-color:#cccccc; /*背景色*/
}
body{
background-image:url(画像のＵＲＬ);/*背景に画像*/
background-repeat:no-repeat ;/*繰り返さない*/
background-position:left bottom;/*左下に配置*/
background-attachment:fixed;/*スクロールしても位置固定*/
}
#frame,
#sub_a,
#sub_b{
background-color:transparent;/*背景色を透明*/
}
div#footerArea{
background-color:transparent;/*背景色を透明*/
border:none;/*線を消す*/
}
スクロールで動かす場合は
background-attachment:fixed;/*スクロールしても位置固定*/
これは必要ありません
背景をスクロールしたときに動かすか固定するかの違い・・・
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
background-attachment: fixed; スクロールしても動かさない
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
もう少し背景続きます・・・・