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

Category
： CSS3

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

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 のデモページ