← カテゴリ一覧に戻る

背景画像の配置・サイズ

background-imagebackground-sizebackground-positionbackground-repeat

背景画像の表示方法を制御するプロパティ群です。サイズ・位置・繰り返し・固定スクロールなど多彩な設定が可能です。

デモ：background-size の違い

background-size: cover

コンテナ全体を覆う
（一部がトリミングされる）

background-size: contain

全体が収まる（余白が出る）

background-size: 100% 100%

引き伸ばす
（縦横比が変わる）

デモ：background-position の違い

top left

top center

top right

center left

center

center right

bottom left

bottom center

bottom right

デモ：background-repeat

repeat（デフォルト）

no-repeat

repeat-x（横方向のみ）

repeat-y（縦方向のみ）

デモ：複数背景（カンマ区切り）

3つの背景を重ねた例（先に書いた方が前面）

コード例

/* 基本的な背景画像 */
.hero {
  background-image: url('/images/hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ショートハンド */
.hero {
  background: url('/images/hero.jpg') center/cover no-repeat;
}

/* 複数背景（カンマ区切り、先に書いた方が前面） */
.layered {
  background-image:
    url('/overlay.png'),       /* 前面 */
    url('/background.jpg');    /* 背面 */
  background-size: auto, cover;
  background-repeat: no-repeat, no-repeat;
}

/* 固定背景（スクロールしても動かない） */
.parallax {
  background-attachment: fixed;   /* fixed / scroll / local */
}

/* グラデーション背景 */
.gradient {
  background-image: linear-gradient(135deg, #667eea, #764ba2);
}

比較：background-size の値

値動作縦横比
coverコンテナ全体を覆う（一部トリミング）✅ 維持される
containコンテナに収まる（余白が出る）✅ 維持される
100% 100%コンテナ全体に引き伸ばす❌ 変わる
auto画像の元のサイズで表示✅ 維持される
200px 150px指定サイズに固定指定次第

Tips複数背景とグラデーションの組み合わせ

background-image にカンマ区切りで複数の値を指定すると、 画像・グラデーションを重ねることができます。先に書いた背景が前面に来ます。 実際の画像なしでも美しい背景が作れます。

/* 画像の上にグラデーションオーバーレイ */
.hero {
  background-image:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(0,0,0,0.7) 100%
    ),
    url('/hero.jpg');
  background-size: cover;
  background-position: center;
}

/* ポルカドットパターン（グラデーションのみで） */
.polka {
  background-image:
    radial-gradient(circle, #6366f1 1px, transparent 1px);
  background-size: 24px 24px;
  background-color: #f8fafc;
}

🤖 AIプロンプトテンプレート

CSSのbackground-imageを使った背景画像・背景パターンの実装例をReact + Tailwind CSSで作成してください。

要件:
- background-image / background-size / background-position / background-repeat の各プロパティを使用
- cover（全体を覆う）・contain（全体を収める）・auto の3種類のサイズ比較デモ
- background-position の9方向（top left / center / bottom right など）の違いを視覚的に比較
- repeat / no-repeat / repeat-x / repeat-y の繰り返し設定のデモ
- 複数背景（カンマ区切り）とグラデーション背景（linear-gradient / radial-gradient）の組み合わせ例
- 実際の画像URLの代わりにグラデーションで代用したデモを含める

各プロパティの値と動作の違いを一目で確認できるインタラクティブなデモにしてください。

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo