CSS backgroundの基本と応用｜背景画像・グラデーションを初心者向けに解説

はじめに

CSS の背景設定は、Web デザインにおいて視覚的な印象を大きく左右する重要な要素です。
単色背景だけでなく、背景画像やグラデーションを活用することで、ページ全体の雰囲気を変えたり、ユーザーの注目を誘導したりできます。

しかし、背景を設定する際には、繰り返しや位置、サイズ、レスポンシブ対応などのポイントを理解しておく必要があります。

本記事では、background-image や linear-gradient の基本から応用例、さらに実装時の注意点までを具体例とコード付きで解説します。

CSS 背景の基本

background プロパティの概要

CSS で背景を設定する際、最も基本となるのがbackground プロパティです。

このプロパティは背景色、画像、繰り返し、位置、サイズなどを一括で指定できます。

書き方はシンプルですが、複数の要素を組み合わせることで多彩な表現が可能です。

本記事の例では下記の画像（image.jpg）を使用して説明していきます。

※余白あり、背景色透明

基本的な background の設定

section {
  width: 100%;
  height: 100vh; /* 背景表示のために幅と高さを設定しています */
  background-color: #dfdede; /* 背景色 */
  background-image: url("image.jpg"); /* 背景画像 */
  background-repeat: no-repeat; /* 繰り返し無し */
  background-position: center; /* 中央に配置 */
}

この設定により、単色と画像を組み合わせた背景を 1 つの要素で表現できます。

background の使い分け

背景を設定する際、単色と画像にはそれぞれ役割があります。どのように使い分けるかを理解することで、デザインの意図を正確に表現できます。

デザインバランスが整い、ユーザーにとっても見やすく、心地よいレイアウトを作ることができます。

繰り返し設定

background プロパティを使うと、背景の画像を繰り返すように設定することができます。

下記にそれぞれの値の特徴をまとめたので、repeat / no-repeat / repeat-x / repeat-yをよく理解し、使い分けましょう。

プロパティ	意味
repeat	縦横に繰り返す
repeat-x	横方向にのみ繰り返す
repeat-y	縦方向にのみ繰り返す
no-repeat	繰り返さず 1 枚だけ表示

例えば、
サイト全体に薄い模様を敷きたい場合は repeat、
ヘッダーの横帯に線を入れたい場合は repeat-x、
サイドバーに縦のラインを加えたい場合は repeat-y、
バナーやロゴのように1 つだけ表示したい場合は no-repeat を指定します。

このように繰り返し指定を正しく使うことで、背景のデザインを意図通りに調整できます。

background プロパティまとめ

グラデーションを使った背景

linear-gradient の基本構文

グラデーションは単色背景より視覚的に華やかで、ボタンやセクションのアクセントに最適です。

CSS では linear-gradient を用いて縦・横・斜めのグラデーションを作成できます。

section {
  background: linear-gradient(to right, #ffffff, #21b98e);
}

この例では、「to right」 によって左から右へのグラデーションが適用されます。

以下にグラデーションの方向指定をまとめました。

方向指定	説明
to top	下から上へグラデーション
to bottom	上から下へグラデーション（デフォルト）
to left	右から左へグラデーション
to right	左から右へグラデーション
to top left	右下から左上へグラデーション
to top right	左下から右上へグラデーション
to bottom left	右上から左下へグラデーション
to bottom right	左上から右下へグラデーション

また、linear-gradient では複数の色を順番に指定することができるため、複雑な配色も CSS だけで表現可能です。

これにより、デザインに柔らかさや動きを加えながら、HTML を増やさずに視覚的なアクセントを付けることができます。

角度・色の指定方法

CSS では、linear-gradient の角度を deg 単位 で細かく指定することができ、自由にグラデーションの方向を調整可能です。

また、複数の色を組み合わせることで、滑らかで複雑な色の変化を表現できます。
例えば、以下のように 45 度の斜め方向にもグラデーションを設定できます。

section {
  background: linear-gradient(45deg, #ffffff, #21b98e);
}

この設定により、左下から右上にかけて滑らかに色が移り変わります。

配色は カラーコード や rgba を用いて柔軟に指定できるため、デザインのアクセントや全体のトーン調整にも非常に有効です。

背景画像の応用

repeat を使った背景指定

repeat を使って小さな画像を繰り返すことで、背景全体を自然に埋めることができ、軽量かつ鮮やかな表現が可能です。

body {
  background-image: url("image.png"); /* 小さなパターン画像 */
  background-repeat: repeat; /* 繰り返して背景全体を埋める */
  background-position: top left; /* 左上から開始 */
  background-color: #ffecf0; /* ベース色も設定 */
}

この設定では、image.png が縦横に繰り返され、ページ全体に均等にパターンが表示されます。

ベース色を併用することで、画像が読み込まれない場合や透過部分も自然な見た目になります。

サイズの調整

背景画像の表示サイズは background-size を使って自由に調整できます。

特に cover と contain は便利な指定方法です。

例えば以下のように設定すると、要素全体を画像で覆い、中央に配置することができます。

section {
  background-image: url("image.jpg");
  background-size: cover;
  background-position: center;
}

• cover：要素を完全に覆う
• contain：画像全体を表示

デザインの意図に応じて使い分けることで、背景画像を効果的に活用できます。

複数画像の重ね合わせ

CSS では複数の背景画像を重ねることも可能です。

カンマで区切って順番を指定することで、先頭の画像が上に表示され、重なり順を制御できます。

section {
  background-image: url("image-pink.png"), url("image.png");
  background-position: center top, left bottom;
  background-repeat: no-repeat, repeat;
}

この方法を使えば、単純な 1 枚の画像では表現できない複雑な装飾や、ページ全体の印象を簡単に変えるデザインが可能です。

レスポンシブ対応

画面サイズに応じた背景調整

レスポンシブデザインでは、background-size とメディアクエリを組み合わせることで、画面サイズごとに背景画像を調整できます。

例えば以下のように設定すると、小さな画面でも画像が切れず、スマホやタブレットでも美しい表示が可能です。

@media screen and (max-width: 768px) {
  section {
    background-size: contain;
  }
}

こうした調整は、デバイスごとの表示崩れを防ぐだけでなく、ユーザーにとって見やすいレイアウトを実現するために不可欠です。
また、画像サイズが大きすぎる場合は表示速度にも注意し、軽量化を意識することが重要です。

よくある背景設定ミスと対処方法

背景画像を設定する際、デザイン通りに表示されないことがあります。

以下のポイントを押さえておきましょう。

• 画像が中央に表示されない

→ background-position: center; を指定する

• 画像が切れる

→ background-size: cover; を使用して要素全体に画像をフィットさせる

これらの対策を行うことで、見た目を整えつつユーザー体験を向上させることが可能です。
特にレスポンシブデザインを意識することで、プロジェクト全体の完成度を高められます。

まとめ

CSS の背景設定は、デザイン表現の幅を広げ、ユーザー体験を向上させるために不可欠です。

単色、画像、グラデーション、複数画像の組み合わせなど、様々な手法を理解することで、意図したデザインを正確に再現できます。

また、レスポンシブ対応やブラウザ互換性も考慮することで、すべてのユーザーに最適な表示を提供できます。
今回の記事を参考に、CSS 背景の基礎から応用まで体系的に理解しましょう。

こうした、HTML/CSS の基礎を始めとする Web 制作を学びたい方には、WEBMASTERS がおすすめです。
Web 制作に必要な基礎知識と実践が効率よく身につくため、学習効率が大幅に向上します。
学習環境や教材が充実しており、独学ではつまずきやすいポイントも現役エンジニアがしっかりサポートしてくれます。