CSSで背景画像を設定する方法｜初心者でもわかる使い方と便利プロパティ一覧

CSS

Webサイトをおしゃれに見せたいときに欠かせないのが背景画像。CSSを使えば簡単にページやボックスに画像を敷き詰めることができます。

でも、初心者の方は次のようなことで悩むことが多いですよね：

  • 画像をどうやって指定するの？
  • 繰り返したり位置を変えたりできる？
  • スマホで見てもちゃんと表示できる？
  • 画像がうまく表示されない…

この記事では、初心者にもやさしく次のことを解説します：

  • CSSで背景画像を設定する基本的な方法
  • 繰り返し・位置・サイズの調整テクニック
  • レスポンシブ対応の方法
  • よくあるトラブルと解決方法

CSSで背景画像を設定する基本から、繰り返しやサイズ調整のテクニックまで、具体例をたっぷり紹介します。

スポンサーリンク

1. CSSで背景画像を設定する基本

background-imageの書き方

背景に画像を設定するには、background-imageプロパティを使います。

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

これだけで、.box要素の背景にbg.jpgが表示されます。

URLの指定方法

画像の場所を指定する方法は主に3つあります：

相対パス

.box {
  background-image: url("images/bg.jpg");
  /* CSSファイルから見た相対的な場所 */
}

絶対パス

.box {
  background-image: url("/assets/images/bg.jpg");
  /* サイトのルートから見た絶対的な場所 */
}

外部URL

.box {
  background-image: url("https://example.com/bg.jpg");
  /* 他のサイトの画像を使用 */
}

実際の使用例

<div class="hero-section">
  <h1>ようこそ</h1>
  <p>美しいWebサイトへ</p>
</div>

.hero-section {
  background-image: url("images/hero-bg.jpg");
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}

注意点

ファイルパスの確認：

  • 画像ファイルが正しい場所にあるか確認
  • ファイル名のスペルミスがないか確認
  • 画像の拡張子（.jpg、.png、.gif等）が正しいか確認

引用符について：

/* 推奨：引用符をつける */
background-image: url("bg.jpg");

/* も可能だが、スペースが含まれる場合は問題になる */
background-image: url(bg.jpg);

まずはbackground-image: url(...)で画像を呼び出すのが基本です。次は、繰り返しや位置調整などもっと実用的な設定を見ていきましょう。

2. 背景画像の繰り返しを制御する

デフォルトは繰り返し（repeat）

CSSの背景画像は初期設定で自動的にタイル状に繰り返し表示されます。

.box {
  background-image: url("bg-pattern.png");
  /* 小さい画像が自動的にタイル状に並ぶ */
}

これだけで、画像が小さいと自動的に何度も並びます。

繰り返さない（no-repeat）

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

これで画像は1回だけ表示されます。

横だけ繰り返す（repeat-x）

.box {
  background-image: url("border.png");
  background-repeat: repeat-x;
  height: 100px;
}

使用例：

  • ヘッダーの装飾ライン
  • 区切り線のパターン
  • 横方向のグラデーション

縦だけ繰り返す（repeat-y）

.sidebar {
  background-image: url("side-pattern.png");
  background-repeat: repeat-y;
  width: 200px;
}

使用例：

  • サイドバーの装飾
  • 縦方向のボーダーパターン
  • メニューの背景装飾

実際の活用例

/* パターン背景 */
.pattern-bg {
  background-image: url("tile-pattern.png");
  background-repeat: repeat;    /* デフォルト値 */
}

/* 大きな背景画像 */
.hero-bg {
  background-image: url("hero-photo.jpg");
  background-repeat: no-repeat;
  height: 100vh;
}

/* ヘッダー装飾 */
.header-decoration {
  background-image: url("header-line.png");
  background-repeat: repeat-x;
  background-position: bottom;
  height: 80px;
}

3. 背景画像の位置を調整する

background-positionで好きな位置に

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

これで画像を上下左右とも中央に配置できます。

キーワードでの指定

基本的なキーワード

/* 9つの基本位置 */
.top-left     { background-position: left top; }
.top-center   { background-position: center top; }
.top-right    { background-position: right top; }

.middle-left  { background-position: left center; }
.middle-center{ background-position: center center; }
.middle-right { background-position: right center; }

.bottom-left  { background-position: left bottom; }
.bottom-center{ background-position: center bottom; }
.bottom-right { background-position: right bottom; }

よく使われる組み合わせ

.hero {
  background-position: center center;  /* 中央配置 */
}

.corner-logo {
  background-position: right top;      /* 右上角 */
}

.footer-bg {
  background-position: center bottom;  /* 下部中央 */
}

パーセントでの指定

.box {
  background-position: 25% 75%;
  /* 横25%、縦75%の位置に配置 */
}

パーセントの意味：

  • 0% 0% = 左上角
  • 50% 50% = 中央
  • 100% 100% = 右下角

ピクセルでの指定

.box {
  background-position: 20px 30px;
  /* 左から20px、上から30pxの位置 */
}

実際の使用例

/* ヒーローセクション */
.hero {
  background-image: url("landscape.jpg");
  background-position: center 30%;    /* 中央やや上 */
  background-repeat: no-repeat;
  height: 600px;
}

/* ロゴ付きヘッダー */
.header {
  background-image: url("logo.png");
  background-position: left center;   /* 左側中央 */
  background-repeat: no-repeat;
  padding-left: 120px;               /* ロゴ分の余白 */
  height: 80px;
}

/* 装飾パターン */
.decoration {
  background-image: url("ornament.png");
  background-position: right bottom; /* 右下角 */
  background-repeat: no-repeat;
}

4. 背景画像のサイズを調整する

background-size

画面に合わせて背景を調整するのに欠かせないのがbackground-sizeです。

画像を要素いっぱいに広げる（cover）

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

coverの特徴：

  • 要素をはみ出してもいいから隙間なくカバーする
  • 画像の一部が切れる可能性がある
  • アスペクト比は保持される

全体を収める（contain）

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

containの特徴：

  • 画像全体が縮小されて表示される
  • はみ出すことはない
  • 余白ができる場合がある

数値指定

.box {
  background-size: 300px 200px;     /* 幅300px、高さ200px */
}

.auto-width {
  background-size: auto 200px;      /* 高さ200px、幅は自動 */
}

.percentage {
  background-size: 100% 50%;        /* 幅100%、高さ50% */
}

coverとcontainの比較例

<div class="cover-example">cover</div>
<div class="contain-example">contain</div>

.cover-example, .contain-example {
  width: 400px;
  height: 300px;
  background-image: url("sample.jpg");
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid #333;
  margin: 20px;
}

.cover-example {
  background-size: cover;     /* 隙間なく覆う */
}

.contain-example {
  background-size: contain;   /* 全体を表示 */
}

実用的な活用例

/* フルスクリーンヒーロー */
.fullscreen-hero {
  background-image: url("hero-large.jpg");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  height: 100vh;
}

/* プロフィール画像エリア */
.profile-bg {
  background-image: url("profile-photo.jpg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}

/* 商品画像 */
.product-image {
  background-image: url("product.jpg");
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
  width: 300px;
  height: 400px;
}

5. 背景を固定する（スクロール時に固定）

background-attachment

スクロールしても背景画像を固定したい場合はbackground-attachmentを使います。

.parallax-section {
  background-image: url("mountain.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  height: 100vh;
}

attachmentの値

fixed（固定）

.fixed-bg {
  background-attachment: fixed;
  /* ページをスクロールしても背景が動かない */
}

scroll（スクロール）

.scroll-bg {
  background-attachment: scroll;
  /* 通常の動作（デフォルト） */
}

local（ローカル）

.local-bg {
  background-attachment: local;
  /* 要素の内容と一緒にスクロール */
}

パララックス効果の実現

.parallax-container {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.parallax-section {
  background-image: url("bg-parallax.jpg");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-section {
  background-color: white;
  padding: 60px 20px;
  text-align: center;
}

モバイル対応の注意点

.parallax-section {
  background-image: url("bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  
  /* デスクトップでは固定 */
  background-attachment: fixed;
}

/* モバイルでは固定を解除（パフォーマンス対策） */
@media (max-width: 768px) {
  .parallax-section {
    background-attachment: scroll;
  }
}

6. 便利なショートハンドプロパティ

backgroundプロパティ

複数の背景設定をまとめて書くにはbackgroundを使います。

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

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

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

ショートハンドの書き方

/* 基本パターン */
background: [image] [repeat] [position] / [size] [attachment] [color];

/* 実例 */
background: url("bg.jpg") no-repeat center / cover fixed #f0f0f0;

よく使われるパターン

/* パターン1：フルカバー背景 */
.hero {
  background: url("hero.jpg") no-repeat center / cover;
}

/* パターン2：繰り返しパターン */
.pattern {
  background: url("pattern.png") repeat;
}

/* パターン3：固定背景 */
.parallax {
  background: url("bg.jpg") no-repeat center / cover fixed;
}

/* パターン4：色と画像の組み合わせ */
.gradient-overlay {
  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("bg.jpg") no-repeat center / cover;
}

7. レスポンシブ対応

メディアクエリでの画像切り替え

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

/* タブレット */
@media (min-width: 768px) {
  .responsive-bg {
    background-image: url("bg-medium.jpg");
  }
}

/* デスクトップ */
@media (min-width: 1024px) {
  .responsive-bg {
    background-image: url("bg-large.jpg");
  }
}

高解像度ディスプレイ対応

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

/* Retina対応 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .retina-bg {
    background-image: url("bg@2x.jpg");
  }
}

レスポンシブサイズ調整

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

/* モバイル */
.flexible-bg {
  background-size: cover;
  height: 50vh;
}

/* タブレット */
@media (min-width: 768px) {
  .flexible-bg {
    height: 60vh;
  }
}

/* デスクトップ */
@media (min-width: 1024px) {
  .flexible-bg {
    height: 80vh;
  }
}

8. よくあるトラブルと解決方法

画像が表示されない

原因1：パスの間違い

/* 間違い */
background-image: url("image/bg.jpg");  /* imagesのスペルミス */

/* 正しい */
background-image: url("images/bg.jpg");

原因2：相対パスの基準

/* CSSファイルの場所を基準にする */
/* styles/main.css から images/bg.jpg を参照する場合 */
background-image: url("../images/bg.jpg");

原因3：ファイル形式

/* ブラウザ対応形式を使用 */
background-image: url("bg.jpg");   /* ✓ */
background-image: url("bg.png");   /* ✓ */
background-image: url("bg.gif");   /* ✓ */
background-image: url("bg.webp");  /* △ 新しいブラウザのみ */

画像がぼやける

/* 高解像度画像を使用 */
.sharp-bg {
  background-image: url("bg-hires.jpg");
  background-size: cover;
  
  /* 画像の補間を調整 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

モバイルでパフォーマンスが悪い

/* モバイル最適化 */
.mobile-optimized {
  background-image: url("bg-small.jpg");
}

@media (min-width: 768px) {
  .mobile-optimized {
    background-image: url("bg-large.jpg");
  }
}

/* 固定背景はモバイルで無効化 */
.parallax {
  background-attachment: fixed;
}

@media (max-width: 767px) {
  .parallax {
    background-attachment: scroll;
  }
}

9. 実践的な活用例

ヒーローセクション

.hero-section {
  background: 
    linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
    url("hero-bg.jpg") no-repeat center / cover;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}

.hero-content h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

カードデザイン

.card {
  background: url("card-bg.jpg") no-repeat center / cover;
  border-radius: 12px;
  padding: 30px;
  color: white;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.3);
  z-index: -1;
}

テクスチャ背景

.textured-section {
  background: 
    url("texture-overlay.png"),
    linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-blend-mode: multiply;
  padding: 60px 20px;
}

まとめ

CSSで背景画像を設定する方法について、重要なポイントをまとめます：

基本的な設定

.background-basic {
  background-image: url("画像パス");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

よく使われる王道パターン

  • ヒーロー背景：background-size: cover + background-position: center
  • パターン背景：background-repeat: repeat
  • 固定背景：background-attachment: fixed（モバイルは除く）

重要なポイント

  • レスポンシブ対応：画面サイズに応じて画像を切り替え
  • パフォーマンス：モバイルでは画像サイズを最適化
  • アクセシビリティ：背景画像に頼らずテキストでも情報を提供

実践のコツ

  • ショートハンドを活用して効率的に記述
  • メディアクエリで画面サイズに応じた最適化
  • デバッグ時はブラウザの開発者ツールで画像の読み込み状況を確認

Youtube

神話・歴史・伝承の解説チャンネル

スポンサーリンク

コメント

タイトルとURLをコピーしました