CSS backgroundプロパティについてのまとめ

CSS backgroundプロパティについてのまとめ

今回は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の知らない使い方があった!って言う人も中には居ると思いますので、今後の参考にして下さい。

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article