CSS 背景

❮ 前章へ 次章へ ❯

CSS background プロパティは、要素の背景効果を定義するために使用します：

CSS background プロパティ：

背景色

background-color プロパティは、要素の配色を指定します。

ページの背景色は次のように設定します：

例

body {
    background-color: lightblue;
}
Try it Yourself ❯

CSS での色は、多くの場合以下により指定します：

可能なカラー値の完全なリストについては、CSS カラー値をご覧ください。

以下の例では、<h1>、<p>、<div> 要素のそれぞれの背景色が異なります：

例

h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}
Try it Yourself ❯

背景画像

background-image プロパティは、要素の背景として使用する画像を指定します。

デフォルトで、画像は繰り返されるので、要素全体をカバーします。

ページの背景画像は、次のように設定することができます：

例

body {
    background-image: url("paper.gif");
}
Try it Yourself ❯

下は、テキストと背景画像の組合せの悪い一例です。テキストが殆んど読めません：

例

body {
    background-image: url("bgdesert.jpg");
}
Try it Yourself ❯

注: 背景画像を使用する場合は、テキストを邪魔しない画像を使用してください。

背景画像 - 横または縦方向への繰返し

デフォルトで、background-image プロパティは横と縦の両方向に画像を繰り返します。

一部の画像には横または縦方向にのみ繰り返すべきものがあり、それを両方向に繰り返すと次のような奇妙なものになります：

例

body {
    background-image: url("gradient_bg.png");
}
Try it Yourself ❯

上の画像を横方向 (background-repeat: repeat-x;) にだけ繰返すと、背景はもっと良くなります:

例

body {
    background-image: url("gradient_bg.png");
    background-repeat: repeat-x;
}
Try it Yourself ❯

注: 画像を縦方向に繰り返すには、background-repeat: repeat-y; と設定します

背景画像 - position と no-repeat 設定

画像を繰り返えさずに表示する場合も、background-repeat プロパティで指定します:

例

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}
Try it Yourself ❯

上記例において、背景画像はテキストと同じ場所に表示されますので、テキストの邪魔にならないように、画像の位置を変更してみようと思います。

画像の位置は、background-position プロパティで指定します:

例

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}
Try it Yourself ❯

背景画像 - 位置の固定

背景画像を、（ページの画像以外の部分と一緒にスクロールしないように）固定したい場合は、 background-attachment プロパティを使用します：

例

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}
Try it Yourself ❯

背景 - ショートハンド・プロパティ

コードを短縮するために、1 つのプロパティで全プロパティを指定することも可能です。 これは、ショートハンド・プロパティと言われます。

背景のショートハンド・プロパティは、background です:

例

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}
Try it Yourself ❯

ショートハンド・プロパティを使用する場合、プロパティ値の順序は次の通りです:

この順に指定されている限り、プロパティ値のうちの 1 つが無くとも、問題ありません。

練習問題で確認テスト！

Exercise 1 ❯  Exercise 2 ❯  Exercise 3 ❯  Exercise 4 ❯  Exercise 5 ❯

全ての CSS 背景プロパティ

プロパティ 説明
background 全ての背景プロパティを 1 回の宣言で設定する
background-attachment 背景画像をページに固定するか、またはスクロールするかを設定する
background-color 要素の背景色を設定する
background-image 要素の背景画像を設定する
background-position 背景画像の開始位置を設定する
background-repeat 背景画像をどのよう繰返すのかを設定する

❮ 前章へ 次章へ ❯