CSSのbackgroundで背景色や画像を設定し、デザインを調整する方法を解説

CSSのbackgroundプロパティは、要素の背景を設定するためのプロパティで、色や画像、位置、繰り返しの方法などを指定することができます。単独のプロパティを組み合わせて使うことも、まとめて一つのプロパティとして指定することも可能です。

background関連プロパティとその効果

background-attachment: 背景画像のスクロール時の挙動を指定します。
background-blend-mode:
background-clip:
background-color: 要素の背景色を指定します。
background-image: 背景画像を指定します。
background-orijin:
background-position: 背景画像の位置を指定します。
background-repeat: 背景画像の繰り返し方法を指定します。
background-size: 背景画像の大きさを指定します。

注意点と関連情報

backgroundプロパティは、複数の値を一括で指定することができる便利なプロパティです。たとえば、background: #4CAF50 url('image.jpg') no-repeat center center / cover;といった形で、背景色、画像、位置、繰り返し、サイズを同時に指定できます。背景画像のサイズや位置を適切に指定することで、レスポンシブなデザインを実現することが可能です。

共通するCSSコード

.css-sample-container {
        width: 600px;
        padding: 20px;
        margin: 20px auto;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
        color: #333;
        text-align: center;
        font-size: 16px;
    }
    .css-sample-item {
        width: 100%;
        height: 200px;
        margin: 10px 0;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        font-size: 20px;
        text-align: center;
    }

background-color: #4CAF50

background-colorは、要素の背景に指定した色を適用します。この例では、背景色に#4CAF50（緑）を適用しています。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-background-color">背景色: #4CAF50</div>
    </div>

CSSコード

.css-sample-background-color {
    background-color: #4CAF50;
}

表示結果

背景色: #4CAF50

background-image: url(‘image.jpg’)

background-imageは、要素の背景に画像を適用します。この例では、背景画像としてプレースホルダー画像を使用しています。

以後、サンプルとして以下の背景画像を用いて解説します。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-background-image">背景画像</div>
    </div>

CSSコード

.css-sample-background-image {
    background-image: url('backsample.png');
    background-size: cover;
}

表示結果

背景画像

background-position: center center

background-positionは、背景画像の表示位置を指定します。この例では、画像を中央に配置しています。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-background-position">背景位置: center</div>
    </div>

CSSコード

.css-sample-background-position {
    background-image: url('backsample.png');
    background-position: center center;
    background-size: cover;
}

表示結果

背景位置: center

background-repeat: repeat

background-repeatは、背景画像の繰り返し方法を指定します。この例では、100x100pxの画像を繰り返し表示しています。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-background-repeat">背景画像の繰り返し</div>
    </div>

CSSコード

.css-sample-background-repeat {
    background-image: url('backsample.png');
    background-repeat: repeat;
}

表示結果

背景画像の繰り返し

background-attachment: fixed

background-attachmentは、背景画像のスクロール時の挙動を指定します。この例では、スクロール時に背景画像が固定されます。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-background-attachment">背景画像の固定</div>
    </div>

CSSコード

.css-sample-background-attachment {
    background-image: url('backsample.png');
    background-attachment: fixed;
    background-size: cover;
}

表示結果

背景画像の固定

まとめ

backgroundプロパティは、要素の背景に色や画像を設定するための非常に強力なツールです。背景画像を適切に配置したり、背景色を指定することで、デザインに豊かな表現を加えることができます。また、backgroundプロパティを一括で指定することで、コードを簡潔にまとめることができ、背景に関するさまざまなプロパティを同時に管理できます。