CSS背景の設定方法【background完全ガイド】

backgroundプロパティの全体像

CSSの background プロパティは、要素の背景を設定するためのプロパティ群です。背景色、背景画像、グラデーションなど、さまざまな表現ができます。ウェブデザインの印象を大きく左右する重要なプロパティです。

たとえば、部屋の壁紙を選ぶ場面を想像してください。無地の色にするか、柄付きにするか、グラデーションにするか。CSSのbackgroundは、まさにWebページの「壁紙」を決めるプロパティです。

backgroundには複数の関連プロパティがあります。background-color（色）、background-image（画像）、background-size（サイズ）、background-position（位置）、background-repeat（繰り返し）などです。これらを組み合わせて、思い通りの背景を作ります。

背景色（background-color）

最も基本的な背景の設定です。色名・HEX・RGB・HSLで指定できます。

body { background-color: #f8fafc; }       /* HEX */
.card { background-color: rgb(255,255,255); } /* RGB */
.btn { background-color: hsl(170, 80%, 30%); } /* HSL */

背景色は最も手軽に見た目を変えられる方法です。ページ全体の背景を薄いグレーにして、カードを白にする。これだけでコンテンツが浮き上がって見えます。色の選び方で読みやすさが大きく変わるので、コントラストを意識しましょう。

💡 CSSの色指定方法で詳しく学べます。

背景画像（background-image）

url() で画像を指定

.hero {
  background-image: url('hero.jpg');
}

background-size（cover / contain）

• cover：要素全体を覆うように拡大（はみ出し部分は切れる）
• contain：画像全体が見えるように縮小（余白ができる場合あり）

.hero {
  background-image: url('hero.jpg');
  background-size: cover;
}

coverとcontainの違いを覚えるコツがあります。coverは「覆う」なので、要素を完全に覆います。画像の一部が見切れることがあります。containは「含む」なので、画像全体を含めて表示します。余白ができることがあります。ヒーロー画像にはcoverを使うのが一般的です。

ピクセル値やパーセントで指定することもできます。background-size: 100px 50pxのように幅と高さを個別に指定できます。

background-position（位置調整）

画像のどの部分を表示するかを指定します。

background-position: center;       /* 中央 */
background-position: top right;    /* 右上 */
background-position: 50% 30%;      /* 横50% 縦30% */

background-repeat（繰り返し制御）

background-repeat: no-repeat; /* 繰り返さない */
background-repeat: repeat-x;  /* 横方向のみ繰り返し */

📖 HTMLの画像表示との使い分けも確認しましょう。

グラデーション

linear-gradient（直線グラデーション）

/* 上から下へ */
background: linear-gradient(to bottom, #667eea, #764ba2);

/* 斜め方向 */
background: linear-gradient(135deg, #f093fb, #f5576c);

radial-gradient（円形グラデーション）

background: radial-gradient(circle, #667eea, #764ba2);

複数色の指定

/* 3色グラデーション */
background: linear-gradient(to right, #ff6b6b, #feca57, #48dbfb);

実践例

ヒーローセクション（背景画像+オーバーレイ）

.hero {
  background-image:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('hero.jpg');
  background-size: cover;
  background-position: center;
  color: white;
  padding: 80px 20px;
  text-align: center;
}

画像の上に半透明の黒を重ねることで、白い文字が読みやすくなります。

グラデーションボタン

.btn-gradient {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

カード背景にグラデーションを使う

カードの背景に薄いグラデーションを使うと、立体感が出ます。白一色よりも洗練された印象になります。

.card {
  background: linear-gradient(to bottom, #ffffff, #f1f5f9);
  border-radius: 12px;
  padding: 24px;
}

Flexboxでカードを横並びにすると、統一感のあるレイアウトが作れます。詳しくはFlexbox入門を参照してください。

🔗 CSS入門ガイドで基礎から学べます。

ショートハンド記法

backgroundプロパティ1つで複数の値をまとめて書けます。

/* 色 画像 繰り返し 位置 / サイズ */
background: #f8fafc url('bg.png') no-repeat center / cover;

ショートハンドは便利ですが、注意点があります。ショートハンドを使うと、指定しなかったプロパティが初期値にリセットされます。たとえば、先にbackground-colorを設定していても、後からbackgroundショートハンドで画像だけ指定すると、色の設定が消えてしまいます。

初心者のうちは、個別プロパティで1つずつ書くほうが安全です。慣れてきたらショートハンドに切り替えましょう。

📖 最初のCSSでプロパティの書き方を復習できます。

よくある間違い

• 背景画像が表示されない：url()のパスが間違っていることが多いです。ファイル名のスペルミスや、相対パスの起点を確認しましょう。要素に高さがない場合も画像が見えません。heightやpaddingで高さを確保してください。
• 背景画像が繰り返される：background-repeatの初期値はrepeatです。写真を1枚だけ表示したいときは、必ずbackground-repeat: no-repeatを指定しましょう。
• スマホで背景画像がぼやける：画像の解像度が低いと、高解像度ディスプレイでぼやけます。表示サイズの2倍の解像度の画像を用意するのがおすすめです。レスポンシブ対応も合わせて確認しましょう。

まとめ

CSSフィルターと組み合わせると、さらに表現の幅が広がります。