background（背景プロパティの一括指定）｜Background - 背景｜スタイルシート（CSS）

background〔背景プロパティの一括指定、マルチ背景〕
background-attachment〔背景画像のスクロール方法を指定〕
background-break 〔インライン要素の背景画像の繰り返し方法〕
background-clip〔背景の描画領域〕
background-color〔背景色〕
background-image〔背景画像〕
background-origin〔背景画像の配置基点〕
background-position〔背景画像の開始位置〕
background-repeat〔背景画像の繰り返し方法〕
background-size〔背景画像のサイズ〕
マルチ背景〔背景画像の複数指定〕

background
背景プロパティの一括指定、マルチ背景

unknown

background: [ <bg_layer> , ]* <final_bg_layer>
<bg_layer> = <bg_image> || <bg_position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}
<final_bg_layer> = <bg_image> || <bg_position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2} || <'background-color'>

backgroundプロパティは、個々の背景プロパティを一括指定できるショートハンドです。

プロパティの値は順不同で半角スペース区切りで指定します。
各値は省略可能となっており、省略した値は、そのプロパティのデフォルト値が適用されます。

デフォルト値：transparent || none || repeat || scroll || 0% 0%
適用：全要素
継承：しない

値

backgroundプロパティの値
値	説明
background-color	背景色
background-image	背景画像
background-repeat	背景画像の繰り返し方法
background-attachment	背景画像のスクロール方法
background-position	背景画像の表示位置

設置サンプル

<style type="text/css">
#d_background1 {
	background:#ff6699 url(/content/img/pattern.jpg) repeat 0 0;
	padding:20px;
	color:#fff;
	font-weight:bold;
	text-align:center;
}
</style>

<div id="d_background1">
	background:#ff6699 url(/content/img/pattern.jpg) repeat 0 0;
</div>

background:#ff6699 url(/content/img/pattern.jpg) repeat 0 0;

background-attachment
背景画像のスクロール方法を指定

unknown

background-attachment: <attachment> [ , <attachment> ]*
<attachment> = scroll | fixed | local

background-attachmentプロパティは、background-imageプロパティで指定した背景画像のスクロール方法を指定します。

このプロパティは単独では使えません。 background-image、background-positionと併用して使用します。

デフォルト値：scroll
適用：全要素
継承：しない

値

background-attachmentプロパティの値
値	説明
scroll	画面をスクロールすると背景画像もスクロールする。
fixed	背景画像を指定した位置に固定表示します。画面をスクロールしても、背景画像は常に指定した位置に表示します。
local	要素のコンテンツに対して固定表示します。　※Safari未サポート？

設置サンプル

scroll

サンプルを見る

body {
	/* スクロールすると、背景画像も一緒にスクロール */
	background-color:#eff3f7 url(/content/img/css/bg.gif) no-repeat center;
	background-attachment:scroll; /* スクロール */
}

fixed

サンプルを見る

body {
	/* fixed：スクロールしても背景画像を常に同じ位置に表示 */
	background:#eff3f7 url(/content/img/css/bg.gif) no-repeat center;
	background-attachment:fixed; /* 固定 */
}

scroll/fixed/local - お知らせ欄の背景画像

[メモ] Chromeでみると、要素サイズが指定されていると、要素内でスクロールすると、scroll/fixedの背景画像が固定となり、localは背景画像がスクロール。画面スクロールすると、scroll/localは背景画像が固定となり、fixedの背景は要素のスクロール位置によって変わった。

設置イメージ

設置サンプルサンプルを見る

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>設置サンプル：background-attacument</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $.ajax({
                    url: "index.xml",
                    type:"GET",
                    dataType:"xml",
                    timeout:1000,
                    cache: false,
                    error:function(){
                        alert("XMLファイルの読み込みに失敗");
                    },
                    success:function(xml){
                        $(xml).find("item").each(function(){
                            var item_link=$(this).find("link").text();
                            var item_title=$(this).find("title").text();
                            if(item_title!="") $("<li></li>").html("<a href='"+item_link+"'>"+item_title+"</a>").appendTo("ol");
                        });
                    }
                });
                
            });
        </script>
        <style type="text/css">
            .feed {
                background-color:#fff;
                margin:0; padding:0;
                border:2px solid #817452;
                width:600px; height:120px;
                 background:transparent;
                background-image:url(/content/img/pattern.jpg);
                background-repeat:repeat;
                background-position:0 0;
                overflow:auto;
            }
            #scroll {
                background-attachment:scroll;
           }
            #fixed {
                background-attachment:fixed;
            }
            #local {
                background-attachment:local;
            }
            .feed_title {
                background-color:#817452;
                padding:2px 10px;
                color:#fff;
                font-weight:bold;
            }
            ol {
                list-style:none;
                margin:10px; padding:0;
            }
            li {
                list-style:none;
                margin:0; padding:0;
            }
            li a {
                color:#fff;
            }
         </style>
    </head>
    <body>
        <div id="wrap">
            <h1>設置サンプル：background-attacument</h1>
<!-- CODE -->
            <h2>scroll</h2>
            <span class="feed_title">新着情報</span>
            <div class="feed" id="scroll"><ol></ol></div>
            <h2>fixed</h2>
            <span class="feed_title">新着情報</span>
            <div class="feed" id="fixed"><ol></ol></div>
            <h2>local</h2>
            <span class="feed_title">新着情報</span>
            <div class="feed" id="local"><ol></ol></div>
<!-- CODE / -->
        </div>
    </body>
</html>

background-break
インライン要素の背景画像の繰り返し方法

unknown

background-break: bounding-box | continuous | each-box

-moz-background-inline-policy: bounding-box | continuous | each-box

background-breakプロパティは、インライン要素の背景画像をどのように繰り返し表示するかを指定します。

デフォルト値：continuous
適用：インライン要素
継承：しない

値

background-breakプロパティの値
値	説明
bounding-box	インライン要素全体で背景画像を繰り返し表示する。
continuous	折り返し2行目以降は前の行の続きから背景画像を繰り返し表示する。
each-box	行ごとに背景画像を最初から繰り返し表示する。

サポート

Chrome: ×／Safari: ×／Firefox: ○／Opera 11: ×／IE9: ×

設置サンプル

サンプルを見る

<style type="text/css">
#d_backgroundbreak {
	width:320px;
	font-size:15px;
	line-height:1.5;
}
#d_backgroundbreak span {
	background:transparent url(/content/img/pic1.png) repeat 0 0;
	color:#fff;
}
#d_backgroundbreak p.p1 span {
	background-break:bounding-box;
	-moz-background-inline-policy:bounding-box;
}
#d_backgroundbreak p.p2 span {
	background-break:each-box;
	-moz-background-inline-policy:each-box;
}
#d_backgroundbreak p.p3 span {
	background-break:continuous;
	-moz-background-inline-policy:continuous;
}
</style>

<div id="d_backgroundbreak">
	<p class="p1">
		<span>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</span>
	</p>
	<p class="p2">
		<span>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</span>
	</p>
	<p class="p3">
		<span>あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん</span>
	</p>
</div>

表示例：Firefox

background-clip
背景の描画領域

unknown

background-clip: <box> [ , <box> ]*
<box> = border-box | padding-box | content-box

background-clipプロパティは、背景画像の表示範囲を指定します。
ボーダーを背景画像に含めたくない場合に有用です。

デフォルト値：border-box（border）
適用：全要素
継承：しない

値

Webkit, Firefoxだけプロパティの値が異なりますので注意してください。

background-breakプロパティの値
値	説明
border-box border	ボーダーを背景の表示範囲に含める。
padding-box padding	ボーダーを背景の表示範囲に含めない。
content-box content	コンテンツエリアに背景画像を表示する。
text	テキストに背景画像を表示する。 ※Chrome、Safariのみ

サポート

Chrome: ○／Safari: ○／Firefox: ○／Opera 11: ○／IE9: ○

設置サンプル

サンプルを見る

<style type="text/css">
#d_backgroundclip {
	margin:0 auto;
	width:320px;
	color:#85bfa7;
	text-align:center;
	font-weight:bold;
}
#d_backgroundclip div {
	background-color:#000;
	background-image:url(/content/img/pattern.jpg);
	background-repeat:repeat;
	border:5px dotted #85bfa7;
	margin:10px 0; padding:30px;
}
#d_backgroundclip  div.border {
	background-clip:border-box;
}
#d_backgroundclip  div.padding {
	background-clip:padding-box;
}
#d_backgroundclip div.content {
	background-clip:content-box;
}
#d_backgroundclip div.text {
	background-clip:text;
	-webkit-background-clip:text; /* これなしだとChrome,Safariで適用されません */
}
</style>

<div id="d_backgroundclip">
	<div class="border">background-clip:border</div>
	<div class="padding">background-clip:padding</div>
	<div class="content">background-clip:content</div>
	<div class="text">background-clip:text</div>
</div>

表示例：Chrome

background-color
背景色

unknown

background-color: <color> | transparent | inherit

background-colorプロパティは、背景の色を指定します。

デフォルト値：transparent
適用：全要素
継承：しない

値

background-colorプロパティの値
値	説明
transparent	透明
<color>	色名（基本色＋拡張された色名）色指定値（#rrggbb形式、#rgb形式、rgb(r,g,b)形式）

/* RRGGBB形式 */
body { background-color: rgb(255,255,0); }
/* 色名 */
body { background-color: yellow; }
/* カラーコード */
body { background-color: #ffff00; }

サポート

Chrome: ○／Safari: ○／Firefox: ○／Opera 11: ○／IE9: ○

設置サンプル

<style type="text/css">
#d_backgroundcolor div {
	margin:10px 0; padding:10px;
}
#d_backgroundcolor  div.rgb {
	background-color:rgb(255,255,0);
}
#d_backgroundcolor  div.colorname {
	background-color:yellow;
}

#d_backgroundcolor div.colorcode {
	background-color:#ffff00;

}
</style>

<div id="d_backgroundcolor">
	<div class="rgb">rgb(255,255,0)</div>
	<div class="colorname">yellow</div>
	<div class="colorcode">#ffff00</div>
</div>

rgb(255,255,0)

yellow

#ffff00

background-image
背景画像

unknown

background-image: <bg_image> [ , <bg_image> ]*
<bg_image> = url('画像URL') | <gradient> | none

background-imageプロパティは、背景画像のURLを指定します。

デフォルト値：none
適用：全要素
継承：しない

値

background-imageプロパティの値
値	説明
none	背景画像なし。
url("画像URL")	背景画像ファイルのURLを相対パス、絶対パスのいずれかで指定。 URL部分は引用符で括らなくてもOK。

/* 相対パスで指定 */
body { background-image: url(/content/img/bg.gif); }
/* 絶対パス（URL）で指定 */
body { background-image: url(http://www.sample.com/img/bg.gif); }

サポート

Chrome: ○／Safari: ○／Firefox: ○／Opera 11: ○／IE9: ○

設置サンプル

<style type="text/css">
#d_background1 {
	background-color:#ff6699;
	background-image:url(/content/img/pattern.jpg);
	background-repeat:repeat;
	background-position:0 0;
	padding:20px;
	color:#fff;
	font-weight:bold;
	text-align:center;
}
</style>

<div id="d_background1">
	background-image:url("/content/img/pattern.jpg");
</div>

background-image:url("/content/img/pattern.jpg");

background-origin
背景画像の配置基点

unknown

background-origin: <box> [ , <box> ]*
<box> = padding-box | border-box | content-box

background-originプロパティは、背景画像を配置する基点を指定します。

デフォルトだと背景画像はボックスの左上を基点（0 0）として表示されますが、このプロパティを使用することで、ボーダーや内余白、任意のボックス要素の左上を背景画像の基点とすることができます。

デフォルト値：padding-box（padding）
適用：全要素
継承：しない

値

Firefoxだけプロパティの値が異なり、「padding | border | content」となります。
それ以外のブラウザは「padding-box | border-box | content-box」です。

※background-origin（Safari5.0+）
※background-origin（FF4.0+）

background-originプロパティの指定可能な組合せ
値	説明
padding-box padding	背景の位置をボーダーの左上隅に固定。
border-box border	背景の位置をパディング領域内の左上隅に固定。
content-box content	背景の位置をパディング領域内のコンテンツ左上隅に固定。

サポート

Chrome: ○／Safari: ○／Firefox: ○／Opera 11: ○／IE9: ○

設置サンプル

サンプルを見る

<style type="text/css">
#d_backgroundorigin div {
	background-color:#000;
	background-image:url(/content/img/icon/color/attention.gif);
	background-repeat:no-repeat;
	border:5px dotted gold;
	margin:10px 0; padding:30px;
	color:gold;
}
#d_backgroundorigin  div.border {
	background-origin:border-box;
}
#d_backgroundorigin  div.padding {
	background-origin:padding-box;
}
#d_backgroundorigin div.content {
	background-origin:content-box;
}
</style>

<div id="d_backgroundorigin">
	<div class="border">エラーメッセージ</div>
	<div class="padding">エラーメッセージ</div>
	<div class="content">エラーメッセージ</div>
</div>

表示例：Chrome

background-position
背景画像の開始位置

unknown

background-position: <bg_position> [ , <bg_position> ]*
<bg_position> = [ [ <%> | <length> | left | center | right ] [ <%> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ]

background-imageプロパティで指定した背景画像の表示開始位置を指定します。

2つの値を指定する場合は、半角スペース区切りで指定します。

background-position:［垂直方向の位置］［水平方向の位置］

デフォルト値：0% 0%
適用：ブロックレベル要素および置換要素のみ
継承：しない

値

background-positionプロパティの指定可能な組合せ
表示位置	キーワード指定	%指定	length指定
左上	top left	0% 0%	0 0
上中央	top center	0% 50%	-
右上	top right	0% 100%
左中央	center left	50% 0%
中央	center center	50% 50%
右中央	center right	50% 100%
左下	bottom left	100% 0%
下中央	bottom center	100% 50%
右下	bottom right	100% 100%
任意の位置	-	0～100% 0～100%	<長さ> <長さ>
inhrit	親要素のスタイルを継承する。

画面右下に固定表示

サンプルを見る

body {
	background:#eff3f7 url(/content/img/css/bg.gif) no-repeat fixed;
	background-position:100%  100%; /* 右下 */
}

画面左上に固定表示

サンプルを見る

body {
	background:#eff3f7 url(/content/img/css/bg.gif) no-repeat fixed;
	background-position:top left; /* 左上 */
}

任意の位置に固定表示

サンプルを見る

body {
	background:#eff3f7 url(/content/img/css/bg.gif) no-repeat;
	background-position:100px 20px; /* 画面の左上端から右に100px、下に20pxの位置に背景画像を表示 */
}

左上から縦方向繰返し表示

サンプルを見る

body {
	background:#eff3f7 url(/content/img/css/bg.gif) repeat-y fixed;
	background-position:top left; /* 左上 */
}

サポート

Chrome: ○／Safari: ○／Firefox: ○／Opera 11: ○／IE9: ○

background-repeat
背景画像の繰り返し方法

unknown

background-repeat: <repeat-style> [ , <repeat-style> ]*

background-repeatプロパティは、background-imageで指定した背景画像の繰り返し方法を指定します。

2つの値を指定する場合は、半角スペース区切りで指定します。

background-repeat:［垂直方向の繰り返し方法］［水平方向の繰り返し方法］

デフォルト値：repeat
適用：全要素
継承：しない

値

background-repeatプロパティの値
値	説明
repeat	画像を縦横両方向に繰り返してタイル状に敷き詰めて表示する。
repeat-x	画像を横方向に繰り返して表示する。
repeat-y	画像を縦方向に繰り返して表示する。
no-repeat	画像の繰り返しなし。
space	画像を繰り返してタイル状に敷き詰めて表示する。ただし、タイルが領域内に収まらない場合は、画像の周りに空白をあけて領域内に収まるようにする。
round	画像を繰り返してタイル状に敷き詰めて表示する。ただし、太いるが領域内に収まらない場合は、画像を縮小して、領域内にフィットするようにする。spaceと異なり、画像間に空白はあかない。

サポート

Chrome: △／Safari: △／Firefox: ○／Opera 11: ○／IE9: ○

※round、spaceはFirefox、IE9+、Opear11+のみサポート。

設置サンプル

repeat

表示例：IE9

サンプルを見る

body {
	background:#eff3f7 url(/content/img/css/bg.gif);
	background-repeat:repeat; /* 背景画像を縦横両方向に繰り返す（デフォルト） */
}

repeat-x

表示例：IE9

サンプルを見る

body {
	background:#eff3f7 url(/content/img/css/bg.gif);
	background-repeat:repeat-x; /* 背景画像を横方向に繰り返しす */
}

repeat-y

表示例：IE9

サンプルを見る

body {
	background:#eff3f7 url(/content/img/css/bg.gif);
	background-repeat:repeat-y; /* 背景画像を縦方向に繰り返す */
}

no-repeat

表示例：IE9

サンプルを見る

body {
	background:#eff3f7 url(/content/img/css/bg.gif);
	background-repeat:no-repeat; /* 背景画像を繰り返さない */
}

space

横方向の背景画像が途中で見切れないよう、画像間に空白をあけて配置される。

表示例：IE9

サンプルを見る

body {
	/* 領域内に背景画像がぴったり収まるようタイル状に繰り返す。画像間を空白で区切って領域にフィット。 */
	background-image:url(/content/img/css/bg.gif);
	background-repeat:space space;
}

round

画像間に空白はあけずに、可能な限り領域内に背景画像が収まるよう、画像自体のサイズが縮小されて配置される。

表示例：IE9

サンプルを見る

body {
	/* 領域内に背景画像がぴったり収まるようタイル状に繰り返す。画像間に空白を開けずに画像をスケーリング。 */
	background-image:url(/content/img/css/bg.gif);
	background-repeat:round round;
}

繰り返し方法の複数指定

サンプルを見る

p {
	background-image: url(/content/img/32x32.png), url(/content/img/bg_stripe_dark.png);
	background-repeat: no-repeat, repeat;
}

background-size
背景画像のサイズ

unknown

background-size: <bg-size> [ , <bg-size> ]*
<bg-size> = [ <length> | <%> | auto ]{1,2} | cover | contain

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

「background-size:200px」のように1つしか値を指定しないと、幅だけにしか適用されないブラウザもあるので、「background-size:200px 200px」のように、2つの値を指定しておいた方がよいです。 2つの値は半角スペース区切りで指定します。

background-size:［垂直方向のサイズ］［水平方向のサイズ］

デフォルト値：auto
適用：全要素
継承：しない

値

background-repeatプロパティの値
値	説明
[ <length> \| <%> \| auto ]{1,2}	1つ目の値は画像の幅、2つ目の値は画像の高さのサイズになる。 2つ目の値を省略した場合は、1つ目と同じ値が適用される。 %指定した場合、背景画像のサイズはbackground-originで指定したエリアの幅か高さに比例。
contain	背景画像の幅と高さの両方が背景領域内に収まるよう、画像の縦横比を維持しながら画像を拡大縮小。
cover	背景画像の幅と高さの両方が背景領域を埋め尽せるよう、画像の縦横比を維持しながら画像を拡大縮小。

サポート

Chrome: ○／Safari: ○／Firefox: ○／Opera 11: ○／IE9: ○

設置サンプル

設置サンプル：background-sizeサンプルを見る

<style type="text/css">
#d_backgroundsize1 {
    background:#000 url(/content/img/krispykremedoughnuts.jpg) no-repeat center center;
    background-size:200px 200px;
    width:200px; height:200px;
    color:#fff; text-align:center; line-height:200px; font-weight:bold; margin:10px; float:left;
}
    #d_backgroundsize1a {
        background:#000 url(/content/img/krispykremedoughnuts.jpg) no-repeat center center;
        background-size:200px;
        width:200px; height:200px;
        color:#fff; text-align:center; line-height:200px; font-weight:bold; margin:10px; float:left;
    }
    #d_backgroundsize1b {
        background:#000 url(/content/img/krispykremedoughnuts.jpg) no-repeat center center;
        background-size:200px auto;
        width:200px; height:200px;
        color:#fff; text-align:center; line-height:200px; font-weight:bold; margin:10px; float:left;
    }
#d_backgroundsize2 {
    background:#000 url(/content/img/krispykremedoughnuts.jpg) no-repeat center center;
    background-size:100% 100%;
    width:100px; height:100px;
    color:#fff; text-align:center; line-height:100px; font-weight:bold; margin:10px; float:left;
}
    #d_backgroundsize2a {
        background:#000 url(/content/img/krispykremedoughnuts.jpg) no-repeat center center;
        background-size:100% 50%;
        width:100px; height:100px;
        color:#fff; text-align:center; line-height:100px; font-weight:bold; margin:10px; float:left;
    }
    #d_backgroundsize2b {
        background:#000 url(/content/img/krispykremedoughnuts.jpg) no-repeat center center;
        background-size:50% 100%;
        width:100px; height:100px;
        color:#fff; text-align:center; line-height:100px; font-weight:bold; margin:10px; float:left;
    }
#d_backgroundsize3 {
    background:#000 url(/content/img/krispykremedoughnuts.jpg) no-repeat center center;
    background-size:contain;
    width:200px; height:200px;
    color:#fff; text-align:center; line-height:200px; font-weight:bold; margin:10px; float:left;
}
    #d_backgroundsize3a {
        background:#000 url(/content/img/krispykremedoughnuts.jpg) repeat center center;
        background-size:contain;
        width:300px; height:200px;
        color:#fff; text-align:center; line-height:200px; font-weight:bold; margin:10px; float:left;
    }
#d_backgroundsize4 {
    background:#000 url(/content/img/krispykremedoughnuts.jpg) no-repeat center center;
    background-size:cover;
    width:200px; height:200px;
    color:#fff; text-align:center; line-height:200px; font-weight:bold; margin:10px; float:left;
}
    #d_backgroundsize4a {
        background:#000 url(/content/img/krispykremedoughnuts.jpg) repeat center center;
        background-size:cover;
        width:300px; height:200px;
        color:#fff; text-align:center; line-height:200px; font-weight:bold; margin:10px; float:left;
    }
</style>

<div class="cf">
    <div id="d_backgroundsize1">200px 200px</div>
    <div id="d_backgroundsize1a">200px</div>
    <div id="d_backgroundsize1b">200px auto</div>
</div>

<div class="cf">
    <div id="d_backgroundsize2">100% 100%</div>
    <div id="d_backgroundsize2a">100% 50%</div>
    <div id="d_backgroundsize2b">50% 100%</div>
</div>
<div class="cf">
    <div id="d_backgroundsize3">contain</div>
    <div id="d_backgroundsize3a">contain - repeat</div>
</div>
<div class="cf">
    <div id="d_backgroundsize4">cover</div>
    <div id="d_backgroundsize4a">cover - repeat</div>
</div>

表示例：Chrome

マルチ背景
背景画像の複数指定

unknown

CSS3からは、マルチ背景に対応しています。 backgroundプロパティに、カンマ区切りで複数の背景画像を指定すると、1つの要素に複数の背景画像を反映することができます。値は重ねる順番で指定していきます（最初に指定したものが一番上、最後に指定したものが一番下になる）。

サポート

Chrome: ○／Safari: ○／Firefox: ○／Opera 11: ○／IE9: ○

設置サンプル

例1

画像を背景画像として敷き、その上にNewリボンを乗せています。

素材：Corner Ribbons - 365psd

サンプルを見る

<style type="text/css"> 
#d_mb {
	margin:0; padding:0;
	width:320px; height:240px;
	background:
		url(/content/img/css/newribbon.png) no-repeat top left,
		url(/content/img/pic1.png) no-repeat 1px 1px;
	position:relative;
}
#d_mb p {
	margin:0; padding:0 8px;
	position:absolute;
	right:0; bottom:0;
	color:#fff;
	font-size:10px;
	text-align:right;
	background:#000;
	opacity:0.4;
}
</style>

<div id="d_mb"><p>La Nordique @Au Temps Jadis</p></div>

表示例：Chrome

例 - Newリボン

背景にグラーデーションを敷き、その上に2種類の背景パターン画像、ロゴ画像の順に重ねています。

サンプルを見る

<style type="text/css"> 
/* WEBフォント指定 */
@font-face {
    font-family:"HuiFont29";
    src: url(/content/font/HuiFont29.eot);/* ie */
}
@font-face {
    font-family:"HuiFont29";
    src: local("HuiFont29"),
         local("HuiFont29"),
         url(/content/font/HuiFont29.ttf) format('truetype');/* firefox, Opera, Chrome */
}
/* 黒板 */
#d_mb {
	border:1px solid #000;
	width:300px; height:150px;
	background:url(/content/img/css/bg1_str.png),
		url(/content/img/css/bg2.png),
		url(/content/img/css/bg1.png),
		-webkit-gradient(linear, left top, left bottom, from(rgba(000, 000, 000, 1)), to(rgba(000, 000, 000, 0.5)));
	background:url(/content/img/css/bg1_str.png),
		url(/content/img/css/bg2.png),
		url(/content/img/css/bg1.png),
		-moz-linear-gradient(top, rgba(000, 000, 000, 1),  rgba(000, 000, 000, 0.5));
	background-repeat:no-repeat, repeat, repeat, repeat;
	background-position: bottom right, top left, left, left;
}
#d_mb p {
	margin:0; padding:20px;
	color:#fff;
	font-size:20px;
    font-family: "HuiFont29",Verdana,sans-serif;
}
</style>

<div id="d_mb">
	<p>★Trick or Treat★<br> お菓子をくれなきゃ、いたずらしちゃうぞ！</p>
</div>

表示例：Chrome

例

角丸フレーム画像を背景として実装したサンプルです。

サンプルを見る

<style type="text/css"> 
#d_mb {
	width:460px;
	padding:0 0 10px 0;
	background: url(/content/img/css/body-top.gif) top left no-repeat,
	url(/content/img/css/mbbanner.jpg) 11px 11px no-repeat,
	url(/content/img/css/body-bottom.gif) bottom left no-repeat,
	url(/content/img/css/body-middle.gif) left repeat-y;
}
#d_mb dl {
	margin:0 10px; padding:0;
}
#d_mb dt {
	margin:0 0 15px 0; padding:0;
	height:200px;
	line-height:200px;
	text-align:center;
	font-size:24px;
	text-shadow:0 0 30px #fff;
	color:#fff;
}
#d_mb dd {
	margin:0; padding:0;
}
</style>

<div id="d_mb">
	<dl>
		<dt>La Nordique@Au Temps Jadis</dt>
		<dd>原宿と渋谷の中間にあるオ・タン・ジャディスに行って来ました。コースは、食前酒orジュース＋サラダ＋ガレット＋デザートクレープ＋食後のコーヒーor紅茶がついて、2500円とリーズナブル♪ガレットは、スモークサーモンとトマトのガレット『ノルディック』をチョイス！スモークサーモンの中には、クリームチーズがたっぷり♪さっぱりとした夏向きのガレットです。</dd>
	</dl>
</div>

表示例：Chrome

Animation - アニメーション

Border - 枠線 Border - 枠線

Background - 背景

background背景プロパティの一括指定、マルチ背景

値

設置サンプル

background-attachment背景画像のスクロール方法を指定

値

設置サンプル

scroll

fixed

scroll/fixed/local - お知らせ欄の背景画像

background-break インライン要素の背景画像の繰り返し方法

値

サポート

設置サンプル

background-clip背景の描画領域

値

サポート

設置サンプル

background-color背景色

値

サポート

設置サンプル

background-image背景画像

値

サポート

設置サンプル

background-origin背景画像の配置基点

値

サポート

設置サンプル

background-position背景画像の開始位置

値

サポート

background-repeat背景画像の繰り返し方法

値

サポート

設置サンプル

repeat

repeat-x

repeat-y

no-repeat

space

round

繰り返し方法の複数指定

background-size背景画像のサイズ

値

サポート

設置サンプル

マルチ背景 背景画像の複数指定

サポート

設置サンプル

例1

例 - Newリボン

例

関連コンテンツ

background
背景プロパティの一括指定、マルチ背景

background-attachment
背景画像のスクロール方法を指定

background-break
インライン要素の背景画像の繰り返し方法

background-clip
背景の描画領域

background-color
背景色

background-image
背景画像

background-origin
背景画像の配置基点

background-position
背景画像の開始位置

background-repeat
背景画像の繰り返し方法

background-size
背景画像のサイズ

マルチ背景
背景画像の複数指定