CSS入門 | CSS基本プロパティ | CSS背景

Webページだけでなく、HTML要素はすべてそれぞれの背景を持つ。 CSSのbackgroundプロパティは、各要素の背景にさまざまな効果を与えられるようにする。

CSS backgroundプロパティ

background-colorプロパティ

background-colorプロパティは、該当するHTML要素の背景色を設定する。

<style>
    body { background-color: lightblue; }
    h1 { background-color: rgb(255,128,0); }
    p { background-color: #FFFFCC; }
</style>

background-imageプロパティ

background-imageプロパティは、該当するHTML要素の背景として表示される背景画像を設定する。 設定された背景画像は、既定ではHTML要素全体にわたって繰り返し表示される。

<style>
    body { background-image: url("/examples/images/img_background_good.png"); }
</style>

background-repeatプロパティ

背景画像は、既定では水平方向と垂直方向の両方に繰り返し表示される。 background-repeatプロパティを使うと、この背景画像を水平方向または垂直方向だけに繰り返すよう設定できる。

次の例は、背景画像の水平繰り返しを示す。

<style>
    body { background-image: url("/examples/images/img_man.png"); background-repeat: repeat-x; }
</style>

次の例は、背景画像の垂直繰り返しを示す。

<style>
    body { background-image: url("/examples/images/img_man.png"); background-repeat: repeat-y; }
</style>

背景画像を繰り返さず、1回だけ表示することもできる。

<style>
    body { background-image: url("/examples/images/img_man.png"); background-repeat: no-repeat; }
</style>

background-positionプロパティ

background-positionプロパティは、繰り返さない背景画像の相対位置を設定する。

<style>
    body {
        background-image: url("/examples/images/img_man.png");
        background-repeat: no-repeat;
        background-position: top right;
    }
</style>

このプロパティで使用できるキーワードの組み合わせは次のとおりである。

1. left top
2. left top
3. left center
4. left bottom
5. right top
6. right center
7. right bottom
8. center top
9. center center
10. center bottom

また、パーセント(%)やピクセル(px)を使って相対位置を直接指定することもできる。 このとき相対位置を決める基準は、該当要素の左上になる。

次の例は、背景画像の相対位置をピクセル単位で直接指定した例である。

<style>
    body {
        background-image: url("/examples/images/img_man.png");
        background-repeat: no-repeat;
        background-position: 100px 200px;
    }
</style>

background-attachmentプロパティ

background-attachmentプロパティを使うと、位置が設定された背景画像をその位置に固定できる。 このように固定された背景画像は、スクロールとは無関係に画面上の位置から移動しない。

<style>
    body {
        background-image: url("/examples/images/img_man.png");
        background-repeat: no-repeat;
        background-position: left bottom;
        background-attachment: fixed;
    }
</style>

backgroundプロパティを一度に適用する

上で説明したすべてのbackgroundプロパティを使ったスタイルを1行で設定できる。

<style>
    body { background: #FFCCCC url("/examples/images/img_man.png") no-repeat left bottom fixed; }
</style>

CSS3の背景

CSS3では、背景のサイズだけでなく位置も自由に設定できる。 また、1つのHTML要素に複数の背景画像を適用することもできる。

CSS3で新しく追加されたbackgroundプロパティは次のとおりである。

CSS3背景プロパティの対応バージョン

CSS3背景プロパティをサポートする主なWebブラウザーのバージョンは次のとおりである。 また、ブラウザーごとにベンダープレフィックスを使ってこの機能を最初にサポートしたバージョンも併記している。

background-sizeプロパティ

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

CSS2での背景画像のサイズとは、背景画像として使われる画像の実際のサイズと同じである。 しかしCSS3では、背景画像のサイズを自由に設定できる。

background-sizeプロパティの構文は次のとおりである。

background-size: 幅 高さ contain|cover ;

背景画像の幅と高さを指定するときは、CSSのサイズ単位を使う。 CSSのサイズ単位には、ピクセル単位(px)、em単位、パーセント単位(%)などがある。

<style>
    #origin { background: url(/examples/images/img_monitor.png); background-repeat: no-repeat; }
    #resize {
        background: url(/examples/images/img_monitor.png);
        background-size: 200px 110px;
        background-repeat: no-repeat;
    }
</style>

background-sizeプロパティ値は、containとcoverのどちらかを選択できる。

値をcontainに設定すると、画像の比率を維持しながら可能な限り大きく調整する。 ただし、背景画像のサイズは該当要素の内容領域を超えない。 そのため、背景画像のサイズは常に該当要素のサイズ以下になり、背景画像が要素の一部を覆えない場合がある。

値をcoverに設定すると、画像の比率を維持しながら要素のすべての領域を覆うようにサイズを調整する。 そのため、背景画像のサイズは常に該当要素のサイズ以上になり、背景画像の一部が切り取られる場合がある。

次の例は、background-sizeプロパティ値による違いを示す。

<style>
    #contain { background-size: contain; }
    #cover { background-size: cover; }
</style>

background-sizeプロパティを使って、画像の比率を維持せずに該当要素全体を覆うよう設定することもできる。

<style>
    html {  background: url(/examples/images/img_flower.png) no-repeat center fixed;  background-size: cover; }
</style>

background-originプロパティ

background-originプロパティは、背景画像の位置を決める基準を設定する。 このプロパティは次の3つの値を使用できる。

1. border-box: 背景画像をborder領域の左上に合わせる。
2. padding-box: 既定値で、背景画像をpadding領域の左上に合わせる。
3. content-box: 背景画像をcontent領域の左上に合わせる。

次の例は、background-originプロパティ値による違いを示す。

<style>
    #border { background-origin: border-box; }
    #content { background-origin: content-box; }
</style>

background-clipプロパティ

background-clipプロパティは、該当要素の背景をどの領域まで設定するかを決める。 このプロパティは次の3つの値を使用できる。

1. border-box: 既定値で、背景をborder領域の端まで設定する。
2. padding-box: 背景をpadding領域の端まで設定する。
3. content-box: 背景をcontent領域までだけ設定する。

次の例は、background-clipプロパティ値による違いを示す。

<style>
    #padding { background-clip: padding-box; }
    #content { background-clip: content-box; }
</style>

background-imageプロパティ: 複数の背景画像設定

background-imageプロパティを使うと、1つの要素に複数の背景画像を設定できる。

それぞれの背景画像はカンマ(,)で区切られ、スタックのように順番に重なる。 背景画像の順序は、最初に指定された画像が最も上に表示される。 つまり、最後に指定された画像が最も下に配置される。

次の例は、background-imageプロパティを使って複数の背景画像を設定する例である。

<style>
    #origin {
        background-image: url(/examples/images/img_man.png), url(/examples/images/img_background_good.png);
        background-position: right top, left;
        background-repeat: no-repeat, repeat;
        background-size: 100px 233px, auto;
    }
</style>