今回はCSSでもけっこう使う頻度の高いbackgroundプロパティについて書いていきたいと思います。
CSSをまだ勉強中の人とかとくに｢background-color｣｢background-image｣｢background-repeat｣は使えると思うですけど、や｢background-position｣を案外使いこなしていなかったり、｢background-attachment｣については知らないって人ってけっこういるような気がします。｢background-attachment｣は実際にほとんど使わないですけどね；
まぁーそんな感じでbackgroundプロパティの解説に移りますねぇ～
background-colorの使い方、意味
名前の通り背景色を指定します。
何も指定しなければ透明（transparentを指定した時と同じ）になります。
使用例
body {
background-color: #000000;
}
background-imageの使い方、意味
名前の通り背景に画像を指定します。
何も指定しなければ画像が存在しないこと（noneを指定した時と同じ）になります。
画像へのパスは相対パスか絶対パスどちらでも大丈夫です。
またbackground-colorを先に使っていた場合、その上に指定した画像がのるって感じですね。
background-imageの使用例
body {
background-image: url(image/hoge.gif);
}
background-repeatの使い方、意味
名前の通り背景画像の繰り返し方法を指定します。
何も指定しなければ縦横方向に繰り返される repeat がかかっている状態です。
background-repeat repeat-xの使用例
body {
background-image: url(image/hoge.gif);
background-repeat: repeat-x;
}
repeat-xは横方向だけに指定された背景画像を繰り返します。
background-repeat repeat-yの使用例
body {
background-image: url(image/hoge.gif);
background-repeat: repeat-y;
}
repeat-yは縦方向だけに指定された背景画像を繰り返します。
background-repeat no-repeatの使用例
body {
background-image: url(image/hoge.gif);
background-repeat: no-repeat;
}
no-repeatは背景画像を繰り返さないです。
background-colorとbackground-imageとbackground-repeatの使用例
body {
background-color: #000000;
background-image: url(image/hoge.gif);
background-repeat: no-repeat;
}
background-positionの使い方、意味
背景画像の位置の初期値を指定します。
何も指定しなければ左上端（top leftまたは0 0）の状態です。
- top
- 上に配置する
- right
- 右に配置する
- bottom
- 下に配置する
- left
- 左に配置する
- center
- 中央に配置する
それ以外にもpxやem,%でも細かい位置の調整が出来ます。
top rightを使用した例
body {
background-color: #000000;
background-image: url(image/hoge.gif);
background-repeat: no-repeat;
background-position: top right;
}
top centerを使用した例
body {
background-color: #000000;
background-image: url(image/hoge.gif);
background-repeat: no-repeat;
background-position: top center;
}
50px 100pxを使用した例
body {
background-color: #000000;
background-image: url(image/hoge.gif);
background-repeat: no-repeat;
background-position: 50px 100px;
}
background-attachmentの使い方、意味
背景画像のスクロール方法を指定します。
何も指定しなければ文書のスクロールと一緒にスクロールする（scroll）の状態です。
fixedの使用例
#contents {
height: 200px;
padding-left: 280px;
overflow-y: scroll;
background-image: url(image/hoge.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 20px 10px;
}
このままの記述ではIE6 には対応していないのでよね...IE6 に対応させる記述は
IE6でbackground: fixedを実現する:CSSを参考にさせて貰いました。
今回の場合は下記ソースをつけ加えて下さい。
* html #contents {
background-position: expression('10px '+this.parentNode.scrollTop + 'px');
}
backgroundの使い方、意味
背景指定の省略化です。
ちなみに自分はこの省略したbackgroundがしか使わないです。（理由としては記述が短くなるからです。）
使用例
body {
background: #000 url(image/hoge.gif) no-repeat fixed right bottom;
}
自分は｢background-color｣｢background-image｣｢background-repeat｣｢background-attachment｣｢background-position｣って順番に記述しています。
そんな感じで長くはなりましたが、backgroundの知らない使い方があった！って言う人も中には居ると思いますので、今後の参考にして下さい。
