【CSS】背景（background）関連プロパティの使い方を基本から解説｜Webの基礎

はじめに

「背景に画像を敷きたいけど、思った位置に表示されない」「背景画像がタイル状に繰り返されてしまう」「画面いっぱいに背景画像を敷いたのに、リサイズすると崩れる」という経験はありませんか？

これらはすべて、CSSの背景（background）関連プロパティを理解すれば解決できます。

前回の記事では、疑似クラス・疑似要素について解説しました。
今回は、要素の背景色や背景画像を制御するbackground関連プロパティについて、色の指定方法から画像の表示位置・サイズ・繰り返し、グラデーション背景まで、仕組みとサンプルコードを交えてわかりやすく解説します。

background関連プロパティとは？

CSSの背景関連プロパティは、要素の背景色や背景画像の見た目を細かく制御するためのプロパティ群です。以下のように、目的別に複数のプロパティが用意されています。

background-color（背景色）

background-color は、要素の背景色を指定するプロパティです。カラーコード（#rrggbb）、rgb()、rgba()、色名など、テキストの色指定（color）と同じ書式が使えます。

書式

セレクタ {
    background-color: 色;
}

サンプル

.box {
    background-color: #f0f8ff;
}

.box-transparent {
    /* 半透明の黒（透過度30%） */
    background-color: rgba(0, 0, 0, 0.3);
}

rgba() や hsla() を使うと、背景を半透明にできるため、背景画像の上にオーバーレイとして重ねる用途によく使われます。

background-image（背景画像）

background-image は、要素に背景画像を敷くプロパティです。url() の中に画像のパスを指定します。複数指定するとカンマ区切りで重ね合わせも可能です。

書式

セレクタ {
    background-image: url("画像のパス");
}

サンプル

.hero {
    background-image: url("images/hero.jpg");
}

画像の読み込みに失敗した場合、background-image には代替テキストの仕組みがありません。装飾目的の画像には向きますが、意味のある画像（商品写真など）は <img> タグで alt 属性を付けて表示しましょう。

background-repeat（繰り返し）

background-repeat は、背景画像を繰り返し表示するかどうかを指定するプロパティです。初期値は repeat（縦横とも繰り返し）です。

主な指定値

書式

セレクタ {
    background-repeat: 値;
}

サンプル（1枚だけ表示したいとき）

.hero {
    background-image: url("images/hero.jpg");
    background-repeat: no-repeat;
}

小さいアイコン画像をタイル状の模様として敷きたい場合は初期値の repeat のまま、写真のように1枚だけ大きく表示したい場合は no-repeat を指定するのが基本です。

background-position（表示位置）

background-position は、背景画像を表示する位置を指定するプロパティです。left center right top bottom のキーワードのほか、% や px での指定もできます。

書式

セレクタ {
    background-position: 横位置 縦位置;
}

サンプル

.hero {
    background-image: url("images/hero.jpg");
    background-repeat: no-repeat;
    background-position: center center;
}

center center（横方向・縦方向とも中央）は、背景画像を要素の中央に配置する際によく使われる指定です。

background-size（表示サイズ）

background-size は、背景画像の表示サイズを指定するプロパティです。cover と contain という2つのキーワードがよく使われます。

主な指定値

書式

セレクタ {
    background-size: 値;
}

サンプル（画面いっぱいに背景を敷く）

.hero {
    background-image: url("images/hero.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

「背景画像がリサイズで崩れる」という悩みの多くは、background-size: cover; と background-position: center center; をセットで指定することで解決します。画面サイズが変わっても、画像の中央を基準に縦横比を保ったまま要素全体を覆ってくれます。

background-attachment（スクロール挙動）

background-attachment は、ページをスクロールしたときに背景画像も一緒に動くかどうかを指定するプロパティです。

主な指定値

書式

セレクタ {
    background-attachment: 値;
}

サンプル（パララックス風の固定背景）

.hero {
    background-image: url("images/hero.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

fixed を指定すると、コンテンツがスクロールしても背景画像だけがその場に留まり続ける、いわゆる「パララックス効果」の簡易版を実現できます。

background-attachment: fixed; はスマートフォンの一部ブラウザで正しく動作しない、またはスクロール時の描画負荷が高くなることがあります。モバイル表示ではメディアクエリで scroll に切り替えることも検討しましょう。

background（ショートハンド）

background は、これまで紹介したプロパティをまとめて1行で指定できるショートハンドプロパティです。

書式

セレクタ {
    background: color image repeat position / size attachment;
}

position と size を同時に指定する場合は、間を スラッシュ（/） で区切ります。

サンプル

.hero {
    background: #333 url("images/hero.jpg") no-repeat center center / cover fixed;
}

上のコードは、これまで個別に指定していた background-color background-image background-repeat background-position background-size background-attachment を1行にまとめたものです。値の順序はある程度自由ですが、position と size の間だけは必ずスラッシュで区切る点に注意してください。

グラデーション背景（linear-gradient）

background-image には画像ファイルだけでなく、CSSの関数で生成するグラデーションも指定できます。代表的なのが linear-gradient()（線形グラデーション）です。

書式

セレクタ {
    background-image: linear-gradient(方向, 色1, 色2, ...);
}

サンプル（斜めのグラデーション）

.banner {
    background-image: linear-gradient(135deg, #0077cc, #00c2a8);
}

サンプル（円形グラデーション）

.spot {
    background-image: radial-gradient(circle, #ffffff, #cccccc);
}

グラデーションは画像ファイルを用意する必要がなく、色の値を変えるだけで印象を調整できるため、バナーやボタンの背景装飾によく使われます。

複数背景の重ね合わせ

background-image はカンマ区切りで複数指定でき、先に書いた画像ほど手前に表示されます。グラデーションと画像を組み合わせて、画像の上に半透明の色を重ねる「オーバーレイ」もよく使われるテクニックです。

サンプル（背景画像に暗いオーバーレイを重ねる）

.hero {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url("images/hero.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

半透明の黒いグラデーション（実質的には単色オーバーレイ）を画像の手前に重ねることで、背景画像の上に置いた白文字を読みやすくする効果があります。

実務サンプル（CSS変数を使ったテーマ切り替え）

CSS変数（カスタムプロパティ）と組み合わせると、背景色をまとめて管理し、テーマの切り替えを簡単に行えます。

HTML

<body class="theme-light">
    <div class="card">
        <h2>お知らせ</h2>
        <p>本日のメンテナンスは20時に終了しました。</p>
    </div>
</body>

CSS

:root {
    --bg-body: #ffffff;
    --bg-card: #f5f8fa;
}

body.theme-dark {
    --bg-body: #1a1a1a;
    --bg-card: #2b2b2b;
}

body {
    background-color: var(--bg-body);
}

.card {
    background-color: var(--bg-card);
    border-radius: 8px;
    padding: 20px;
}

body に theme-dark クラスを付け替えるだけで、--bg-body と --bg-card の値が切り替わり、ページ全体の背景色をまとめて変更できます。ダークモード対応など、背景色の切り替えが必要な場面で実務でもよく使われる構成です。

よくある質問・トラブル対処

Q. 背景画像が表示されない

→ url() の中のパスが間違っていないか確認してください。CSSファイルからの相対パスであるため、HTMLファイルから見たパスと混同しやすい点に注意が必要です。

Q. 背景画像がタイル状に繰り返されてしまう

→ background-repeat の初期値は repeat です。1枚だけ表示したい場合は background-repeat: no-repeat; を明示的に指定してください。

Q. background-size: cover を指定したのに画像が切れて見える

→ cover は縦横比を保ったまま要素全体を覆う仕様のため、要素と画像の縦横比が異なると、はみ出た部分が意図的に切り取られます。画像全体を必ず見せたい場合は contain を検討してください。

Q. background と個別プロパティ（background-color など）を両方書いたらどうなる？

→ background のショートハンドは、指定しなかった項目をすべて初期値にリセットする性質があります。個別プロパティを先に書いても、後から background を書くと上書きされて消えてしまうため、指定順序に注意してください。

おわりに（まとめ）

次回は、CSSのアニメーション（transition・animation）について解説予定です。

この記事が、少しでも誰かのお役に立てれば幸いです。

関連記事

• 【CSS】疑似クラス・疑似要素の使い方を基本から解説
• 【CSS】ボックスモデルとは？margin・padding・borderの仕組みを解説
• 【CSS】positionプロパティの使い方を基本から解説
• 【CSS】フォント関連プロパティについて基本解説
• Webページに関する基礎的な勉強を始めます

当サイトの記事で使用したVBAなどのサンプルをDLできます

この記事のサンプルはありません！

ダウンロードページへは下のカードをクリックすればジャンプできます。
よろしければご利用ください！

サンプルのダウンロードはこちらから

【Excel VBA】サンプルファイル_ダウンロードのページ ・最新の登録データが一番上になっています。・目次クリックでジャンプできますのでご利用ください。 ダウンロード一覧（1/7ページ目）新しい登録順です 記事ごとに使っ…