CSS/background

backgroundプロパティ

backgroundプロパティは、要素の背景を設定するために使用されるショートハンドプロパティです。これにより、背景色、背景画像、画像の配置、繰り返し、サイズ、背景の配置起点などを一度に指定できます。backgroundプロパティには複数の個別のプロパティが含まれており、それぞれを独立して設定することも可能です。

基本構文

background: <background-color> <background-image> <background-repeat> <background-position> <background-attachment> <background-origin> <background-clip> <background-size> <background-blend-mode>;

各プロパティは次の通りです：

• background-color：背景色を指定します。
• background-image：背景画像を指定します。
• background-repeat：背景画像の繰り返し設定を指定します。
• background-position：背景画像の位置を指定します。
• background-attachment：背景画像の固定方法を指定します。
• background-origin：背景の配置起点を指定します。
• background-clip：背景の描画領域を指定します。
• background-size：背景画像のサイズを指定します。
• background-blend-mode：背景レイヤーのブレンドモードを指定します。

例

/* 背景色、画像、繰り返し、位置を一括指定 */
div {
    background: #f00 url("bg.jpg") no-repeat center;
}

この例では、次の設定が行われます：

• 背景色：赤色（#f00）
• 背景画像：bg.jpg
• 画像の繰り返しなし（no-repeat）
• 画像の位置：中央（center）

各プロパティの詳細

background-color

background-colorプロパティは、背景色を指定します。単色の背景を設定する際に使用します。

/* 背景色を赤に設定 */
div {
    background-color: #ff0000;
}

background-image

background-imageプロパティは、背景に表示する画像を指定します。画像はURLを指定して設定します。

/* 背景画像としてimage.pngを設定 */
div {
    background-image: url("image.png");
}

background-repeat

background-repeatプロパティは、背景画像の繰り返し方法を指定します。主に以下の値があります：

• repeat：背景画像が縦横に繰り返されます（デフォルト）。
• no-repeat：背景画像は繰り返されません。
• repeat-x：背景画像が水平方向に繰り返されます。
• repeat-y：背景画像が垂直方向に繰り返されます。

/* 背景画像を繰り返さず1回だけ表示 */
div {
    background-repeat: no-repeat;
}

background-position

background-positionプロパティは、背景画像の配置位置を指定します。位置は水平軸と垂直軸の2つの値で指定できます。

/* 背景画像を中央に配置 */
div {
    background-position: center;
}

/* 背景画像を上部中央に配置 */
div {
    background-position: center top;
}

background-attachment

background-attachmentプロパティは、背景画像の固定方法を指定します。主に以下の値を使用します：

• scroll：背景画像はスクロールに合わせて動きます（デフォルト）。
• fixed：背景画像はスクロールしても固定されたままです。
• local：背景画像は要素の内容と一緒にスクロールします。

/* 背景画像を固定 */
div {
    background-attachment: fixed;
}

background-origin

background-originプロパティは、背景の配置起点を指定します。背景画像の位置決めの基準となるボックスを指定します。

/* 背景の配置起点をコンテンツボックスに設定 */
div {
    background-origin: content-box;
}

主に以下の値があります：

• padding-box：背景の配置起点をパディングボックスに設定します。
• content-box：背景の配置起点をコンテンツボックスに設定します。
• border-box：背景の配置起点をボーダーボックスに設定します。

background-clip

background-clipプロパティは、背景の描画領域を指定します。背景がどこまで描画されるかを制御します。

/* 背景をパディングボックスの範囲で描画 */
div {
    background-clip: padding-box;
}

主に以下の値があります：

• border-box：背景はボーダーボックス内に描画されます（デフォルト）。
• padding-box：背景はパディングボックス内に描画されます。
• content-box：背景はコンテンツボックス内に描画されます。

background-size

background-sizeプロパティは、背景画像のサイズを指定します。画像を自動的にリサイズすることができます。

/* 背景画像を要素全体に合わせてリサイズ */
div {
    background-size: cover;
}

/* 背景画像をコンテンツに合わせてリサイズ */
div {
    background-size: contain;
}

主に以下の値があります：

• cover：背景画像を要素のサイズに合わせてリサイズし、要素全体をカバーします。
• contain：背景画像を要素内に収めるようにリサイズします。

background-blend-mode

background-blend-modeプロパティは、背景レイヤーのブレンドモードを指定します。これにより、背景色と背景画像を組み合わせる方法を制御できます。

/* 背景画像と色を乗算ブレンド */
div {
    background-blend-mode: multiply;
}

主に以下の値があります：

• normal：ブレンドは行われません（デフォルト）。
• multiply：背景画像と背景色が乗算されます。
• screen：背景画像と背景色がスクリーン効果で合成されます。
• overlay：乗算とスクリーンの効果を組み合わせます。

まとめ

backgroundプロパティを使用することで、要素の背景に色、画像、サイズ、繰り返し方法などを簡単に設定できます。また、個別のプロパティを使用して、背景の細かな設定を行うことも可能です。これにより、ウェブデザインにおいて視覚的な効果を強化することができます。