【CSS】もう背景画像で迷わない！ background-imageの基本から応用まで解説！

Webデザインでは、ページ全体の雰囲気を作ったり、要素を引き立てるために「背景画像」を使うことがよくあります。

その際に役立つのが 「background-image 」です。

本記事では、background-image の基本的な使い方から、グラデーションやドットパターンなどの応用テクニックまで、実践的に使える知識を詳しく解説します。

background-imageとは？

background-image は CSS プロパティのひとつで、要素に背景画像やグラデーションを設定できます。単に画像を読み込むだけでなく、CSSで生成したグラデーションを背景として利用できるのも大きな特徴です。

こうした背景表現を使うことで、ページ全体の雰囲気を演出したり、テキストやコンテンツを引き立てるデザインが可能になります。

基本的な書き方

.element {
  background-image: url("画像のパス");
}

See the Pen knowledge_background-image_001 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

画像のパスについて

background-image に指定する画像のパスには 相対パス と 絶対パス があります。

/* 相対パス */
.element {
  background-image: url("../images/bg.png");
}

/* 絶対パス */
.element {
  background-image: url("https://example.com/images/bg.png");
}

パスの種類	内容
相対パス	Web開発しているプロジェクト内のファイル構造を基準に指定する方法。 → Web開発中は変更や管理がしやすいため、基本的には 相対パスを使うことが多い です。
絶対パス	ドメインやサーバーのルートを基準に指定する方法。 → 外部画像や特定のURLを使う場合に使います。

background-imageの基本

background-image は背景を設定する基本プロパティですが、画像の表示方法や位置、サイズなどを組み合わせることで、より意図したデザインに仕上げることができます。

ここでは、background-image と一緒によく使うプロパティを順番に見ていきましょう。

1. background-repeat（繰り返し）

背景画像を繰り返すかどうかを指定するプロパティです。
指定しない場合は、デフォルトで画像が繰り返されます。

.element {
  background-image: url("bg.jpg");
  background-repeat: no-repeat; /* 繰り返さない */
}

See the Pen knowledge_background-image_002 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

よく使う値

• repeat（デフォルト） → 水平方向・垂直方向に繰り返し
• repeat-x → 横方向に繰り返し
• repeat-y → 縦方向に繰り返し
• no-repeat → 繰り返さない

2. background-position（表示位置）

背景画像の表示位置を指定するプロパティです。

.element {
  background-image: url("bg.jpg");
  background-position: center; /* 中央配置 */
}

See the Pen knowledge_background-image_003 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

よく使う値

• 横軸の指定 → left / center / right
• 縦軸の指定 → top / center / bottom
• 数値指定も可能 → 例: 20px 50%

3. background-size（サイズ調整）

背景画像の拡大・縮小方法を指定するプロパティです。

.element {
  background-image: url("bg.jpg");
  background-size: cover;
}

See the Pen knowledge_background-image_004 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

よく使う値

• cover → 要素全体を覆う（必要に応じてトリミングされる）
• contain → 要素内に収まる（余白が出る場合あり）
• 数値指定も可能 → 例: 100px 200px

background ショートハンドでまとめる

個別プロパティをまとめて書く場合は、background プロパティを使うと1行で指定できます。

順番は次の通りです：background: [画像] [繰り返し] [位置] / [サイズ];

.element {
  background: url("bg.jpg") no-repeat center / cover;
}

See the Pen knowledge_background-image_005 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

まとめて書くとコードがスッキリしますが、値を忘れやすいので、初心者はまず個別プロパティで理解し、慣れたらショートハンドを使うのがおすすめです。

background-imageの応用

1. 線形グラデーション

linear-gradient を使って、単色ではなく滑らかな色の変化を背景に設定できます。

通常のグラデーション

.element {
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
}

See the Pen knowledge_background-image_006 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

ボーダーパターン

.element {
  background-image: linear-gradient(-90deg, #fff 50%, transparent 50%);
}

See the Pen knowledge_background-image_007 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

2. 円形グラデーション

radial-gradient を使うと、放射状（円や楕円）の形で、単色ではなく色が滑らかに変化する背景を設定できます。

中央から外に広がる光のような背景

.element {
  background-image: radial-gradient(circle, #ffffff, #1c1c1c);
}

See the Pen knowledge_background-image_007 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

楕円形のグラデーション

.element {
  background-image: radial-gradient(ellipse at center, #fbc2eb, #a6c1ee);
}

See the Pen knowledge_background-image_008 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

ドットパターン背景（繰り返しパターン化）

.element {
  background-image: radial-gradient(circle, #1c1c1c 2px, transparent 2px);
  background-size: 20px 20px;
}

See the Pen knowledge_background-image_009 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

3. 複数背景（レイヤー）

複数の画像やグラデーションを重ねて、奥行きのあるデザインにできます。

背景画像 × グラデーション

.element {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* 半透明の黒グラデーション */
    url("bg-photo.jpg"); /* 背景写真 */
  background-size: cover;
  background-position: center;
}

See the Pen knowledge_background-image_014 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

チェック柄

.element {
  background-image:
    linear-gradient(-90deg, #8be4f0 50%, transparent 50%),
    linear-gradient(#8be4f0 50%, transparent 50%);
}

See the Pen knowledge_background-image_011 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

ドット色違い

.element {
  background-image:
    radial-gradient(#b4f3ea 20%, transparent 20%),
    radial-gradient(#ffbcbc 20%, transparent 20%);
}

See the Pen knowledge_background-image_012 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

4. 固定背景（パララックス効果）

background-attachment: fixed; を使ってスクロールしても背景が固定される効果を作れます。

.element {
   background-attachment: fixed;
}

See the Pen knowledge_background-image_013 by Yugo Harima (@yh-kasou-knowledge) on CodePen.

まとめ

background-image を使えば、画像やグラデーションを背景として自由に重ねたり配置したりできます。
さらに、単色やパターン、複数レイヤーも簡単に表現可能で、デザインの幅をぐっと広げられます。

ぜひ background-image を活用して、魅力的で表現力のある背景デザインを作ってみてください。

background-imageのドットパターン背景を使用しているサイト

以下のサイトは『銀河特急 ミルキー☆サブウェイ』というアニメを紹介する特設サイトです。
TRAILERやNEWSのコンテンツで、ドットパターン背景を確認することができます!

銀河特急 ミルキー☆サブウェイ

銀河特急 ミルキー☆サブウェイ