CSS、バックグラウンド

Webページのデザインにおいて、**背景（background）**の指定はとても重要な要素です。CSSではさまざまな背景関連のプロパティが用意されており、それらを組み合わせることで、画像や色を自在にコントロールできます。

今回は、よく使うbackground関連のプロパティを中心に、わかりやすく解説していきます。

background 関連プロパティの初期値一覧
background関連プロパティ
background-image と <img> タグの違い
1. 🔷 background-image の特徴
2. 🔷 <img> タグの特徴
  1. <img> タグを使うケース
  2. コンテンツとしての画像を表示
複数の背景画像を指定する
1. ポイント
background プロパティとパフォーマンス
1. 改善のために
background プロパティ × メディアクエリ
background のショートハンド指定について
1. ショートハンドの利点
background によくあるトラブルと対処法
まとめ：よく使う背景プロパティはこれ！

background 関連プロパティの初期値一覧

background-color: transparent
　→ 背景色なし（透明）
background-image: none
　→ 背景画像なし
background-repeat: repeat
　→ 画像を縦横に繰り返す
background-position: 0% 0%（= left top）
　→ 背景画像は左上に配置される
background-size: auto
　→ 画像の元サイズで表示
background-attachment: scroll
　→ 背景はスクロールと一緒に動く
background-origin: padding-box
　→ 背景画像の起点はパディング内側
background-clip: border-box
　→ 背景の描画範囲はボーダーまで

あくまでも初期値なので、プロパティの値（例：transparent→pink）をpinkに変えると、透明から、ピンクに変わります。

background関連プロパティ

background-color：背景色を設定する

background-color: #ffe88d;

CSS

ページや要素の背景色を指定するプロパティです。色はカラーコードや色名（例：red）でも指定できます。

使用例：

body {
  background-color: #ffe88d;
}

CSS

background-image：背景画像を設定する

background-image: url('images/bg.jpg');

CSS

背景に画像を表示させるプロパティです。画像のURLを指定します。画像の位置や繰り返しの設定と合わせて使うのが一般的です。

使用例：

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

CSS

下記条件いずれかで画像が表示されます。

width、heightでサイズを指定する
要素内にテキストがある
要素内に画像やボタンなど他の子要素がある
要素に padding が設定されている
要素が display: inline で、テキストに対して背景が表示される

※サイズが0だと表示されません。

画像サイズ、300px、250pxです。要素は300px、300pxです。

🔍 なぜ画像が上に寄っているように見えるのか？

背景画像を指定しただけだと以下の初期値のため、画像のポテトサラダ画像の、2枚目が途切れてみえます。

background-repeat: repeat;（繰り返し表示）
background-position: 0% 0%;（左上に配置）
background-size: auto;（元画像サイズのまま表示）

つまり：

画像（300×250）は左上に貼り付けられ、
div（300×300）の残り下50pxは背景画像が途切れて表示されている状態です。

div.hero {
  width: 300px;
  height: 300px;
  background-image: url('hero.jpg');
}

CSS

background-repeat：背景画像の繰り返しを設定

background-repeat: no-repeat;

CSS

背景画像を繰り返すかどうかを指定します。

値	説明
`repeat`	縦横に繰り返す（初期値）
`no-repeat`	繰り返さない
`repeat-x`	横方向に繰り返す
`repeat-y`	縦方向に繰り返す

ポイントまとめ

div.hero {
  width: 300px;
  height: 300px;
  background-image: url('hero.jpg');
  background-repeat: no-repeat;
}

CSS

下の例では、要素サイズが 300px × 300px に対して、画像サイズは 300px × 250px。
no-repeat を指定しているため、画像は1回だけ表示され、残りのスペース（50px分）は空白のままになります。

background-position：背景画像の表示位置

background-position: center center;

CSS

画像の表示位置を指定できます。top、bottom、left、right、centerなど、キーワードや数値パーセント（%）で指定可能です。

キーワード値

left（0% 50%） / center（50% 50%） / right（100% 50%）（水平方向）
top（50% 0%） / center（50% 50%） /bottom（50% 100%）（垂直方向）

background-position にキーワードを1つだけ指定した場合、指定された値が水平方向か垂直方向かによって、もう一方の未指定の軸には自動的に center（中央）が補完されます。これにより、単一指定でも2値指定と同様に背景画像の位置が確定されます。

使用例：

div.banner {
  background-image: url('banner.jpg');
  background-position: center;
  background-repeat: no-repeat;
}

CSS

要素の端に合わせて背景画像を配置したいとき

<head>
  <style>
      body {
        background-color: #fffed7;
      }
      .banner {
        width: 100%;
        height: 60px;
        background-image: url('banner.jpg');
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 60px 60px;
        background-color: #f2f2f2;
        display: flex;
        align-items: center;
        padding-left: 80px;
        font-size: 1.0rem;
      }
  </style>
</head>
<body>
  <div class="banner">
    <p>期間限定キャンペーン開催中！</p>
  </div>
</body>

HTML

コードのポイント

width: 100%; height: 60px;
　バナー全体のサイズを固定し、背景画像とテキストの高さを揃える
background-size: 60px 60px;
　背景画像の表示サイズを指定し、正確にコントロール
background-position: left top;
　背景画像を要素の左上に固定
padding-left: 80px;
　テキストが画像に重ならないよう余白を確保
display: flex; align-items: center;
　テキストの高さを要素中央に揃え、視覚的なバランスを調整

テキストと背景画像をレイアウトで分けたいとき

<head>
  <style>
    body {
      background-color: #fffed7;
    }
    .feature {
      width: 100%;
      max-width: 800px;
      height: 250px;
      background-image: url('feature-bg.png');
      background-repeat: no-repeat;
      background-position: right center;
      background-color: #fff;
      display: flex;
      align-items: center;
      padding: 20px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    
    .feature-text {
      max-width: 50%;
      color: #333;
    }
  </style>
</head>
<body>
  <div class="feature">
    <div class="feature-text">
      <h2>新機能のご紹介</h2>
      <p>より直感的なUIで作業効率がアップしました。</p>
    </div>
  </div>
</body>

HTML

コードのポイント

display: flex; と align-items: center; により、テキストブロックを縦方向中央に配置
background-image は装飾用の画像を right center に固定し、視線が自然に誘導される
background-repeat: no-repeat; で画像の繰り返しを防止
padding: 20px; でテキストまわりに適度な余白を確保
max-width: 50%; を .feature-text に指定することで、テキストと画像の表示領域を明確に分割
box-shadow によりコンテンツボックスが浮き上がって見える演出

この例では、左側にテキスト、右側に背景画像を固定することで、視覚的にバランスのとれた見せ方を実現しています。画像はあくまで装飾として使われ、background-position によって右側にきっちりと配置されており、テキストの可読性を損なわずにビジュアルを添える構成です。

background-size：背景画像のサイズを調整

background-size: cover;

CSS

背景画像の表示サイズをコントロールできます。

値	説明
`auto`	元のサイズで表示（初期値）
`cover`	要素全体を覆うように拡大縮小
`contain`	要素内に収まるように表示
`100px 200px`	幅と高さを指定

使用例：

div.full-bg {
  background-image: url('bg.jpg');
  background-size: cover;
}

CSS

contain

テキストと背景画像をレイアウトで分けたいとき。のコードでcontainを追加しました。

background-size: contain; は、背景画像のアスペクト比を保持しながら、要素のコンテナ内に完全に収まる最大サイズまでスケーリングされます。スケーリングは、要素の width または height のいずれかの短辺に到達した時点で停止し、画像が要素の外にはみ出すことはありません。

🔹特徴：

スケーリングの基準は「はみ出さないこと」
長辺方向には余白が残る場合がある
画面サイズに応じて柔軟に調整される（レスポンシブに強い）

background-attachment：背景のスクロール挙動

background-attachment: fixed;

CSS

スクロール時の背景の動き方を指定します。

値	説明
`scroll`	通常スクロール（初期値）
`fixed`	背景を固定（パララックス風効果）
`local`	要素のスクロールとともに動く

使用例：

div.fixed-bg {
  background-image: url('mountain.jpg');
  background-attachment: fixed;
}

CSS

background-origin・background-clip：背景の表示範囲を細かく制御

これら2つはやや上級者向けですが、背景の表示範囲をより細かく制御できます。

background-origin

背景画像の「開始位置」をどこからにするか。

値	説明
`padding-box`	パディングから（初期値）
`border-box`	ボーダーから
`content-box`	コンテンツ部分から

background-clip

背景の描画範囲をどこまでにするか。

値	説明
`border-box`	ボーダーまで（初期値）
`padding-box`	パディングまで
`content-box`	コンテンツまで

background-image と <img> タグの違い

Webデザインにおいて、画像を表示する方法には大きく分けて二つのアプローチがあります。それが、CSSの background-image と HTMLのタグです。どちらも画像をページに表示するために使われますが、その目的や使用方法には大きな違いがあります。

background-image は主に背景として画像を設定するために使い、ページのビジュアルデザインを補完する役割を果たします。一方で、タグはコンテンツとして画像を埋め込むために使用し、画像が持つ情報をユーザーに伝えたり、検索エンジンやスクリーンリーダーに対して説明を提供する役割があります。

🔷 background-image の特徴

主に装飾的な用途で使用（背景やビジュアル効果に最適）
コンテンツとして表示されない（テキストや他の要素の背後に表示）
画像が背景として表示され、コンテンツに直接影響を与えない
レスポンシブデザインで、background-size: cover; や contain; を使ってサイズ調整可能
画像が切れてもいい場合に有効（cover使用時）
画像の説明が不要で、SEOやアクセシビリティには影響しない
画像の位置や繰り返しの指定が可能（background-position, background-repeat）

background-image を使うケース

アイコンの背景
ヘッダー画像（装飾用）
ボタンやリンクの背景
パターンやテクスチャ（背景全体を埋める場合）
カードやセクションの背景画像
フッター画像
レスポンシブ背景画像（background-size: cover; や contain; を使う）
ビジュアル効果やグラデーション画像

ヘッダー画像（装飾用）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* ヘッダー部分のスタイル */
    header {
      position: relative; /* オーバーレイを背景画像に重ねるための設定 */
      background-image: url('back.jpg'); /* 背景画像の指定 */
      background-size: cover; /* 画像を要素全体に合わせて拡大・縮小 */
      background-position: center; /* 画像を中央に配置 */
      height: 400px; /* ヘッダーの高さ */
      color: white; /* 文字の色 */
      display: flex; /* フレックスボックスで中央寄せ */
      justify-content: center; /* 水平方向中央寄せ */
      align-items: center; /* 垂直方向中央寄せ */
      text-align: center; /* テキストを中央寄せ */
      overflow: hidden; /* ヘッダー内の内容がはみ出さないように設定 */
    }

    /* ヘッダーオーバーレイ（背景色を半透明にして画像を見やすくする） */
    header::before {
      content: ""; /* 擬似要素を使ってオーバーレイを作成 */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(94, 94, 94, 0.7); /* 半透明の黒オーバーレイ */
      z-index: 1; /* オーバーレイを背景画像の上に表示 */
    }

    /* ヘッダー内のタイトル */
    header h1 {
      font-size: 3rem;
      margin: 0;
      position: relative; /* z-indexを適用するために必要 */
      z-index: 2000; /* タイトルをオーバーレイの上に表示 */
      text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7); /* 文字に影をつけて見やすくする */
    }

    /* サブタイトル（任意で追加） */
    header p {
      font-size: 1.5rem;
      position: relative; /* z-indexを適用するために必要 */
      z-index: 2000;
      text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7); /* サブタイトルの影 */
    }
  </style>
</head>
<body>
  <header>
    <div>
      <h1>ウェブサイトです</h1>
      <p>ようこそ！！</p>
    </div>
  </header>
</body>
</html>

HTML

ボタンやリンクの背景

タンのデザインをより印象的に見せたいときに、テキストだけでなく背景画像を組み合わせる方法が効果的です。この例では、鍋のイラストを背景に設定し、「今すぐ購入」というテキストを重ねたボタンを作成しています。

実用ポイント

画像とテキストを重ねるデザインが柔軟に可能
テキストはHTML上に存在するので、SEOやアクセシビリティにも対応
背景画像の切り替えにより、視覚的なインタラクションが強化される
背景に使用する画像は透過PNGが最適（文字の上にかぶらないように）
モバイルにも対応させる場合は、background-size: contain などでレスポンシブ調整も可能
複数ボタンを使うときはクラス名でバリエーションを分けて管理すると便利

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ボタンの背景画像</title>
  <style>
    /* ボタンのスタイル */
    .button {
      background-image: url('back1.png'); /* 背景画像を設定 */
      background-size: 50%; /* 画像をボタンサイズに合わせて拡大・縮小 */
      background-position: center; /* 画像を中央に配置 */
      background-repeat: no-repeat;
      font-size: 2.5rem; /* 文字サイズ */
      font-weight: bold;
      padding: 20px 50px; /* ボタンの内側の余白 */
      border: none; /* ボーダーを削除 */
      cursor: pointer; /* ポインターカーソル */
      text-align: center; /* テキストを中央揃え */
      border-radius: 5px; /* 角を丸くする */
      color: rgb(255, 255, 255); /* 文字色 */
      text-shadow: rgb(0, 0, 0) 2px 0 10px;
      transition: background 0.3s ease; /* ホバー時の背景変更のアニメーション */
    }

    /* ボタンのホバー効果 */
    .button:hover {
      background-image: url('back2.png'); /* ホバー時に別の画像を表示 */
      background-size: cover;
      background-position: top;
    }
  </style>
</head>
<body>
  <!-- ボタン -->
  <button class="button">今すぐ購入</button>
</body>
</html>

HTML

背景画像は中央に配置し、ボタンサイズに合わせて縮小表示。
画像が繰り返し表示されないよう no-repeat を指定。
大きめのフォントサイズと余白で視認性を高めつつ、
text-shadow によって背景画像の上でも文字が読みやすいようにいたしました。
transition を使うことで、ホバー時の変化が滑らかに表示されます。
ユーザーがマウスを重ねたときに、別の画像に切り替えてアクションを強調。
background-size: cover; を使って、ボタン全体に背景がフィットするよう調整。

🔷 <img> タグの特徴

コンテンツとしての画像を表示（ページの一部として意味を持つ）
画像に**alt属性を指定でき、SEOやアクセシビリティ**に影響を与える
画像が完全に表示される（アスペクト比保持が可能）
画像にリンクを設定したり、インタラクティブな要素として使用可能
レスポンシブ対応：srcsetやpictureタグで異なる解像度の画像を自動で切り替える
画像の説明が必要な場合、alt属性で指定する（SEOやスクリーンリーダー向け）

<img> タグを使うケース

商品画像
プロフィール画像
記事やブログのサムネイル画像
イラストや図解
広告バナー
リンク付き画像（クリック可能な画像）
SNSアイコン（ユーザーのアバター画像など）
動的に変更される画像（例えば、スライダー画像）
SEO用の画像（alt属性を使うことで検索エンジンに画像の内容を伝える）

コンテンツとしての画像を表示

このセクションでは、**背景の茶色い部分はデザインのための背景画像（background-image）**を使っています。
一方で、鍋のイラストは <img> タグを使って表示しており、実際に見せたい「コンテンツの画像」です。

つまり、

背景 → 見た目の雰囲気を作るため（装飾）
画像 → 中身を伝えるため（コンテンツ）

このように、「デザイン」と「情報」それぞれの役割に合わせて、画像の使い方を分けています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ヘッダー画像とコンテンツ画像の併用</title>
  <style>
body, html {
  overflow-x: hidden;  /* 横スクロールを無効にする */
}
    /* ヘッダー部分のスタイル */
    header {
      display: flex;
      justify-content: space-around;
      background-image: url('back3.png'); /* 背景画像を設定 */
      background-size: cover; /* 背景画像を要素に合わせて拡大・縮小 */
      background-position: center; /* 画像を中央に配置 */
      height: 400px; /* ヘッダーの高さ */
      color: white; /* テキストの色 */
      text-align: center; /* テキストを中央に配置 */
      display: flex; /* フレックスボックスを使って要素を中央寄せ */
      align-items: center; /* 垂直方向中央寄せ */
    }

    div {
      position: relative;
      width: 150px;
      height: 300px;
      background-color: rgb(0, 0, 0);
    }

    /* 画像をヘッダー内に重ねる */
    header .img {
      position: absolute;
      top: 100px;
      left: 110px;
      /* max-width: 50%;  */
      z-index: 1; 
    }
    /* 文字 */
    header .im {
      position: absolute;
      z-index: 1; 
    }
    header .im1 {
      top: -140px;
      left: -515px;
    }
    header .im2 {
      top: -150px;
      left: -515px;
    }
    header .im3 {
      top: -120px;
      left: -515px;
    }
  </style>
</head>
<body>
  <!-- ヘッダー -->
  <header>
    <!-- コンテンツ画像 -->
     <div class="con1">
       <img src="1キムチ.png" class="im im1"/>
       <img src="9.png" class="img"/>
      </div>
      <div class="con2">
        <img src="3ちゃんこ.png" class="im im2"/>
        <img src="99.png" class="img"/>
      </div>
      <div class="con3">
        <img src="2kai.png" class="im im3"/>
       <img src="999.png" class="img"/>
    </div>
  </header>
</body>
</html>

HTML

複数の背景画像を指定する

CSS では background-image に カンマ区切りで複数の画像を指定することができます。
これにより、画像を重ねて表示するような表現が可能です。

.box {
  background-image: url("pattern.png"), url("main-bg.jpg");
  background-position: top left, center;
  background-repeat: repeat, no-repeat;
  background-size: auto, cover;
}

CSS

最初に書かれた画像（pattern.png）が上に表示
下にある画像（main-bg.jpg）はベースの背景として扱われる

ポイント

複数の背景を使うことで、パターン＋メインビジュアルのような重ね表現ができる
各プロパティ（position, repeat, size など）もカンマ区切りで順に適用

background プロパティとパフォーマンス

background-image による画像読み込みは、ページの表示速度や描画パフォーマンスに影響を与えることがあります。

高解像度の画像を使用しすぎると、読み込みが遅くなる
表示されない画像も読み込まれるため、非表示領域に大きな背景画像を使うのは避ける

改善のために

画像の最適化（圧縮）
WebPやAVIFなど軽量フォーマットの使用
lazy-loadingではなくても、背景画像はmedia queryで表示切り替えするのも有効

background プロパティ × メディアクエリ

background プロパティは、メディアクエリと組み合わせてレスポンシブに対応することができます。

.box {
  background-image: url("pc-bg.jpg");
}

@media (max-width: 768px) {
  .box {
    background-image: url("mobile-bg.jpg");
    background-size: cover;
  }
}

CSS

PCとスマホで背景画像を切り替えたい場合に便利
background-size なども同時に変更可能

background のショートハンド指定について

background は複数のプロパティを一括でまとめて記述できるショートハンドプロパティです。

.box {
  background: url("image.jpg") no-repeat center/cover #f5f5f5;
}

CSS

これは以下と同じ意味です。

background-image: url("image.jpg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-color: #f5f5f5;

CSS

ショートハンドの利点

コードを簡潔にまとめられる
一括指定により、意図しない初期化に注意（未指定の値も上書きされる）

background によくあるトラブルと対処法

CSS の background プロパティは便利ですが、表示されない・崩れる・思った通りに動かないなどのトラブルがよくあります。ここでは代表的なトラブルとその原因、解決方法を紹介します。

トラブル① 背景画像が表示されない

📌 主な原因

background-image: url() の パスが間違っている
要素に width や height が指定されていない
要素が 非表示（display: none） になっている

✅ 対処法

.box {
  background-image: url("images/bg.jpg");
  width: 300px;
  height: 200px;
}

CSS

画像のパスを確認（相対パス or 絶対パス）
要素の大きさを明示する（height が特に忘れやすい）

トラブル② 背景画像が繰り返されてしまう

📌 主な原因

デフォルトでは background-repeat: repeat; が有効になっているため

✅ 対処法

.box {
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
}

CSS

トラブル③ 画像の位置がずれる

📌 主な原因

background-position の指定が不適切
padding や border によるズレ

✅ 対処法

.box {
  background-position: center center;
  background-origin: border-box; /* padding-box, content-boxも検討 */
}

CSS

トラブル④ 要素を縮小すると背景がはみ出す／切れる

📌 主な原因

background-size の未指定 or cover の挙動の理解不足

✅ 対処法

.box {
  background-size: contain; /* 要素内に収める */
}

CSS

画像全体を見せたい → contain
要素を埋め尽くしたい → cover（ただし一部が切れる可能性あり）

トラブル⑤ 背景画像がスクロールと一緒に動く

📌 主な原因

background-attachment の初期値は scroll

✅ 対処法

.box {
  background-attachment: fixed;
}

CSS

※ 注意：モバイルブラウザでは fixed が効かないケースもあります。

まとめ：よく使う背景プロパティはこれ！

プロパティ	よく使う場面
background-color	単色背景に
background-image	画像を使いたい時
background-repeat	繰り返しを制御
background-position	位置を微調整したい時
background-size	画像をリサイズしてフィット
background-attachment	スクロールに応じた効果