CSS3 背景

ブラウザ・サポート

Firefox 3.6 以前のバージョンは、background-origin プロパティをサポートしていません。 また、background-size プロパティをサポートするためには、接頭辞 -moz- を必要とします。

Safari 4 は、新 background プロパティをサポートするためには、接頭辞 -webkit- を必要とします。

Internet Explorer 9、Firefox 4、Chrome、Safari 5 および Opera は、新 background プロパティをサポートしています。

CSS3 background-size プロパティ

background-size プロパティは、背景画像のサイズを指定します。

CSS3 以前は、背景画像のサイズは、実際の画像サイズで決定されていました。 CSS3では、異なるコンテキストで背景画像を再使用を可能にする背景画像のサイズを指定することが可能です。

ピクセルまたはパーセントでサイズを指定できます。 パーセントでサイズを指定する場合、 サイズは親要素の幅と高さが基準になります。

例 1

背景画像をリサイズします:

div
{
background:url(img_flwr.gif);
-moz-background-size:80px 60px; /* Firefox 3.6 */
background-size:80px 60px;
background-repeat:no-repeat;
}

Try it yourself »

例 2

コンテンツ・エリアがいっぱいになるように、背景画像を引き伸ばします:

div
{
background:url(img_flwr.gif);
-moz-background-size:100% 100%; /* Firefox 3.6 */
background-size:100% 100%;
background-repeat:no-repeat;
}

Try it yourself »

CSS3 background-origin プロパティ

background-origin プロパティは、背景画像の配置エリアを指定します。

背景画像は、content-box、padding-box または border-box エリア内に配置することができます。

例

content-box 内に背景画像を配置します:

div
{
background:url(img_flwr.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

Try it yourself »

例

body 要素へ2つの背景画像を設定します:

body
{
background-image:url(img_flwr.gif),url(img_tree.gif);
}

Try it yourself »

新 Background プロパティ