CSS3 background 関係のプロパティ・使い方

CSS3 background 関係のプロパティ・使い方

最近は CSS3 ネタばかりですが、今回は CSS3 で使える background 関係のプロパティを紹介、解説です。

Download

…ここからが続き

background-size

背景画像のサイズを指定します。横幅 縦幅の順で記述します。

対応ブラウザ(2010 3/8 現在)
Safari , Google Chrome , Firefox , Opera

指定方法・表示例

.demo1 {
	background: url(images/bg.jpg) no-repeat;
	-webkit-background-size: 500px 50px; /* Safari,Google Chrome用 */
	-moz-background-size: 500px 50px; /* Firefox用 */
	-o-background-size: 400px 80px; /* Opera用 */
}
.demo2 {
	background: url(images/bg.jpg) no-repeat;
	-webkit-background-size: 50% 50%; /* Safari,Google Chrome用 */
	-moz-background-size: 50% 50%; /* Firefox用 */
	-o-background-size: 50% 50%; /* Opera用 */
}

background-size

background-size のデモページ

background-origin

上記の background-size で指定した場合の、算出方法を指定します。

  • padding (パッディング領域まで含めたボックスサイズで算出)
  • border (ボーダーまで含めたボックスサイズで算出)
  • content (コンテンツ領域のみのボックスサイズで算出
対応ブラウザ(2010 3/8 現在)
Safari , Google Chrome , Firefox

指定方法・表示例

.demo1 {
	background: url(images/bg.jpg) no-repeat;
	-webkit-background-size: 400px 80px;
	-moz-background-size: 400px 80px;
	-webkit-background-origin: padding; /* Safari,Google Chrome用 */
	-moz-background-origin: padding; /* Firefox用 */
}
.demo2 {
	background: url(images/bg.jpg) no-repeat;
	-webkit-background-size: 400px 80px;
	-moz-background-size: 400px 80px;
	-webkit-background-origin: border; /* Safari,Google Chrome用 */
	-moz-background-origin: border; /* Firefox用 */
}
.demo3 {
	background: url(images/bg.jpg) no-repeat;
	-webkit-background-size: 400px 80px;
	-moz-background-size: 400px 80px;
	-webkit-background-origin: content; /* Safari,Google Chrome用 */
	-moz-background-origin: content; /* Firefox用 */
}

background-origin

background-origin のデモページ

background-clip

背景画像を描画する際、border 領域の下から描画するか、padding 領域から描画するかを指定します。

  • padding (パッディング領域まで含めたボックスサイズで背景画像を描画)
  • border (ボーダーまで含めたボックスサイズで背景画像を描画)
対応ブラウザ(2010 3/8 現在)
Safari , Google Chrome , Firefox

指定方法・表示例

.demo1-1 {
	background: #999 url(images/bg2.jpg) no-repeat;
	-webkit-background-size: 400px 80px;
	-moz-background-size: 400px 80px;
	-o-background-size: 400px 80px;
	-webkit-background-clip: padding; /* Safari,Google Chrome用 */
	-moz-background-clip: padding; /* Firefox用 */
}
.demo2-1 {
	background: #999 url(images/bg2.jpg) no-repeat;
	-webkit-background-size: 400px 80px;
	-moz-background-size: 400px 80px;
	-o-background-size: 400px 80px;
	-webkit-background-clip: border; /* Safari,Google Chrome用 */
	-moz-background-clip: border; /* Firefox用 */
}

background-clip

background-clip のデモページ

backgorund-image 複数指定

従来までは一枚しか画像を指定する事は出来なかったのですが、カンマ区切りで複数指定する事が出来ます。

対応ブラウザ(2010 3/5 現在)
Safari , Google Chrome

指定方法・表示例

body {
	background-image: url(images/01.gif), url(images/02.gif), url(images/03.gif), url(images/04.gif);
	background-position: left top, left right, left bottom, right bottom;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

backgorund-image 複数指定

backgorund-image 複数指定のデモページ

background-inline-policy

インライン要素の背景画像のり返し方を指定します。

  • bounding-box (インライン要素全体に対して背景画像を繰り返し表示する)
  • each-box (行ごとに背景画像を繰り返して表示する)
  • continuous (ひとつ前の行の繰り返しを引き継いで背景画像を表示する)
対応ブラウザ(2010 3/8 現在)
Firefox

指定方法・表示例

span	{ background: url(images/bg3.jpg); font-size: 116.6%; font-weight: bold; }
.bounding-box	{
	-moz-background-inline-policy: bounding-box;
}
.each-box	{
	-moz-background-inline-policy: each-box;
}
.continuous	{
	-moz-background-inline-policy: continuous;
}

background-inline-policy のデモページ

Download

Comments

MIYA

MIYA

ご指摘ありがとうございました!修正しておきました!

2010年03月10日 00:34

匿名

匿名

background-sizeの説明画像、誤字と思います。

2010年03月09日 20:42

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