はじめに

Webサイトのデザインにおいて、背景は視覚的な印象を大きく左右する要素です。CSSでは、単純な色指定から複雑なグラデーション、複数の背景画像の重ね合わせまで、多彩な表現が可能です。

本記事では、CSSにおける背景プロパティを体系的に解説します。基本的なプロパティから始まり、線形・放射状・円錐グラデーション、そして複数背景の制御テクニックまで、実践的なコード例とともに学んでいきましょう。

この記事で扱う内容は以下のとおりです。

  • background関連プロパティの基本
  • 線形グラデーション（linear-gradient）
  • 放射状グラデーション（radial-gradient）
  • 円錐グラデーション（conic-gradient）
  • 複数背景の重ね合わせ
  • background-sizeとbackground-positionによるサイズ・位置制御

background関連プロパティの基本

CSSの背景は複数のプロパティで制御します。それぞれの役割を理解することが、背景デザインの第一歩です。

背景プロパティの一覧

プロパティ 説明 デフォルト値
background-color 背景色 transparent
background-image 背景画像 none
background-repeat 繰り返し方法 repeat
background-position 配置位置 0% 0%
background-size サイズ auto auto
background-attachment スクロール挙動 scroll
background-origin 配置基準 padding-box
background-clip 描画範囲 border-box

background-colorによる背景色の指定

最も基本的な背景プロパティです。色の指定方法については、別記事「CSSカラー完全ガイド」で詳しく解説しています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

.element {
  /* キーワード */
  background-color: skyblue;
  
  /* HEX */
  background-color: #3498db;
  
  /* RGB */
  background-color: rgb(52 152 219);
  
  /* HSL */
  background-color: hsl(204 70% 53%);
  
  /* 透明度付き */
  background-color: rgb(52 152 219 / 50%);
}

background-imageによる背景画像の指定

画像ファイルやグラデーションを背景として設定します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

.element {
  /* URL指定 */
  background-image: url('/images/background.jpg');
  
  /* グラデーション */
  background-image: linear-gradient(to right, #3498db, #2ecc71);
  
  /* 複数指定（カンマ区切り） */
  background-image: 
    url('/images/pattern.png'),
    linear-gradient(to bottom, #fff, #f0f0f0);
}

background-repeatによる繰り返し制御

背景画像の繰り返し方法を指定します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

.element {
  background-image: url('/images/pattern.png');
  
  /* 両方向に繰り返し（デフォルト） */
  background-repeat: repeat;
  
  /* 繰り返しなし */
  background-repeat: no-repeat;
  
  /* 横方向のみ繰り返し */
  background-repeat: repeat-x;
  
  /* 縦方向のみ繰り返し */
  background-repeat: repeat-y;
  
  /* 切り取らずに収まる範囲で繰り返し */
  background-repeat: space;
  
  /* 隙間なく収まるように拡大縮小して繰り返し */
  background-repeat: round;
}

background-attachmentによるスクロール挙動

スクロール時の背景の挙動を制御します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

.element {
  background-image: url('/images/background.jpg');
  
  /* コンテンツと一緒にスクロール（デフォルト） */
  background-attachment: scroll;
  
  /* ビューポートに固定（視差効果） */
  background-attachment: fixed;
  
  /* 要素のコンテンツに対して固定 */
  background-attachment: local;
}

fixedを使用すると、スクロールしても背景が動かない視差効果（パララックス）を実現できます。

1
2
3
4
5
6
7

.parallax-section {
  height: 100vh;
  background-image: url('/images/hero.jpg');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

backgroundショートハンドプロパティ

複数の背景プロパティを一行でまとめて指定できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

/* フルシンタックス */
.element {
  background: 
    [image] [position] / [size] [repeat] [attachment] [origin] [clip] [color];
}

/* 実践例 */
.hero {
  background: 
    url('/images/hero.jpg') center / cover no-repeat fixed;
}

/* 複数背景の場合 */
.multi-bg {
  background: 
    url('/images/overlay.png') center / cover no-repeat,
    linear-gradient(to bottom, #3498db, #2ecc71);
}

ショートハンドを使用する際の注意点として、background-sizeを指定する場合はbackground-positionの直後にスラッシュで区切って記述する必要があります。

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

線形グラデーションは、直線に沿って色が変化するグラデーションです。

基本構文

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

.element {
  /* 上から下へ（デフォルト） */
  background: linear-gradient(#3498db, #2ecc71);
  
  /* 方向を指定 */
  background: linear-gradient(to right, #3498db, #2ecc71);
  background: linear-gradient(to bottom right, #3498db, #2ecc71);
  
  /* 角度を指定 */
  background: linear-gradient(45deg, #3498db, #2ecc71);
  background: linear-gradient(135deg, #3498db, #2ecc71);
}

方向キーワードの対応は以下のとおりです。

キーワード 角度 方向
to top 0deg 下から上
to right 90deg 左から右
to bottom 180deg 上から下（デフォルト）
to left 270deg 右から左

複数色のグラデーション

3色以上のグラデーションも作成できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

.rainbow {
  background: linear-gradient(
    to right,
    #ff0000,  /* 赤 */
    #ff7f00,  /* オレンジ */
    #ffff00,  /* 黄 */
    #00ff00,  /* 緑 */
    #0000ff,  /* 青 */
    #4b0082,  /* 藍 */
    #9400d3   /* 紫 */
  );
}

カラーストップの位置指定

各色の開始位置をパーセンテージで指定できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

.element {
  /* 最初の色を30%まで、次の色を70%から */
  background: linear-gradient(
    to right,
    #3498db 30%,
    #2ecc71 70%
  );
}

/* ハードエッジ（境界線をくっきり） */
.hard-edge {
  background: linear-gradient(
    to right,
    #3498db 50%,
    #2ecc71 50%
  );
}

繰り返しグラデーション

repeating-linear-gradientを使用すると、パターンとして繰り返すグラデーションを作成できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

/* ストライプパターン */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #3498db,
    #3498db 10px,
    #2980b9 10px,
    #2980b9 20px
  );
}

/* 進行バー風 */
.progress-bar {
  background: repeating-linear-gradient(
    -45deg,
    #f1c40f,
    #f1c40f 10px,
    #f39c12 10px,
    #f39c12 20px
  );
}

線形グラデーションの実践例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

/* モダンなボタン */
.btn-gradient {
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  color: white;
  font-weight: bold;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-gradient:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

/* ヘッダーのグラデーション背景 */
.header-gradient {
  background: linear-gradient(
    135deg,
    #1a1a2e 0%,
    #16213e 50%,
    #0f3460 100%
  );
  color: white;
}

/* テキストにグラデーション */
.gradient-text {
  background: linear-gradient(90deg, #f093fb, #f5576c);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

放射状グラデーション（radial-gradient）

放射状グラデーションは、中心から外側に向かって色が変化するグラデーションです。

基本構文

1
2
3
4
5
6
7
8

.element {
  /* 中心から外側へ（デフォルト） */
  background: radial-gradient(#3498db, #2ecc71);
  
  /* 形状を指定 */
  background: radial-gradient(circle, #3498db, #2ecc71);
  background: radial-gradient(ellipse, #3498db, #2ecc71);
}

形状とサイズの制御

1
2
3
4
5
6
7
8
9

.element {
  /* 円形、サイズはキーワードで指定 */
  background: radial-gradient(circle closest-side, #3498db, #2ecc71);
  background: radial-gradient(circle farthest-corner, #3498db, #2ecc71);
  
  /* 具体的なサイズを指定 */
  background: radial-gradient(circle 100px, #3498db, #2ecc71);
  background: radial-gradient(ellipse 200px 100px, #3498db, #2ecc71);
}

サイズキーワードの意味は以下のとおりです。

キーワード 説明
closest-side 最も近い辺に接する
farthest-side 最も遠い辺に接する
closest-corner 最も近い角に接する
farthest-corner 最も遠い角に接する（デフォルト）

中心位置の指定

atキーワードを使用して、グラデーションの中心位置を指定できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.element {
  /* 左上を中心に */
  background: radial-gradient(circle at top left, #3498db, #2ecc71);
  
  /* 座標で指定 */
  background: radial-gradient(circle at 30% 70%, #3498db, #2ecc71);
  
  /* ピクセルで指定 */
  background: radial-gradient(circle at 100px 50px, #3498db, #2ecc71);
}

繰り返し放射状グラデーション

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

/* 同心円パターン */
.concentric {
  background: repeating-radial-gradient(
    circle,
    #3498db,
    #3498db 10px,
    #2980b9 10px,
    #2980b9 20px
  );
}

/* ターゲットマーク風 */
.target {
  background: repeating-radial-gradient(
    circle at center,
    #e74c3c,
    #e74c3c 20px,
    #fff 20px,
    #fff 40px
  );
}

放射状グラデーションの実践例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

/* スポットライト効果 */
.spotlight {
  background: radial-gradient(
    circle at 50% 0%,
    rgba(255, 255, 255, 0.3),
    transparent 50%
  );
}

/* 球体風のボタン */
.btn-sphere {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    #fff,
    #3498db 50%,
    #1a5276
  );
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* ビネット効果（写真の縁を暗く） */
.vignette {
  background: 
    radial-gradient(
      ellipse at center,
      transparent 50%,
      rgba(0, 0, 0, 0.5) 100%
    ),
    url('/images/photo.jpg') center / cover;
}

円錐グラデーション（conic-gradient）

円錐グラデーションは、中心点を軸に回転するように色が変化するグラデーションです。円グラフやカラーホイールの作成に適しています。

基本構文

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

.element {
  /* 基本形 */
  background: conic-gradient(#3498db, #2ecc71);
  
  /* 複数色 */
  background: conic-gradient(
    #e74c3c,
    #f39c12,
    #2ecc71,
    #3498db,
    #9b59b6,
    #e74c3c
  );
}

開始角度と中心位置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.element {
  /* 開始角度を指定 */
  background: conic-gradient(from 90deg, #3498db, #2ecc71);
  
  /* 中心位置を指定 */
  background: conic-gradient(at 25% 25%, #3498db, #2ecc71);
  
  /* 両方指定 */
  background: conic-gradient(from 45deg at center, #3498db, #2ecc71);
}

円グラフの作成

円錐グラデーションを使用すると、CSSだけで円グラフを作成できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/* 円グラフ */
.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #e74c3c 0% 35%,      /* 赤: 35% */
    #3498db 35% 55%,     /* 青: 20% */
    #2ecc71 55% 80%,     /* 緑: 25% */
    #f39c12 80% 100%     /* 黄: 20% */
  );
}

/* ドーナツチャート */
.donut-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: 
    radial-gradient(circle, #fff 60%, transparent 60%),
    conic-gradient(
      #e74c3c 0% 35%,
      #3498db 35% 55%,
      #2ecc71 55% 80%,
      #f39c12 80% 100%
    );
}

カラーホイールの作成

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

.color-wheel {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    hsl(0 100% 50%),
    hsl(60 100% 50%),
    hsl(120 100% 50%),
    hsl(180 100% 50%),
    hsl(240 100% 50%),
    hsl(300 100% 50%),
    hsl(360 100% 50%)
  );
}

繰り返し円錐グラデーション

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

/* 放射線パターン */
.sunburst {
  background: repeating-conic-gradient(
    #3498db 0deg 10deg,
    #2980b9 10deg 20deg
  );
}

/* チェッカーボード */
.checkerboard {
  background: 
    repeating-conic-gradient(
      #000 0deg 90deg,
      #fff 90deg 180deg
    );
  background-size: 50px 50px;
}

複数背景の重ね合わせ

CSSでは、複数の背景を重ね合わせることができます。先に指定した背景が上に表示されます。

基本的な複数背景

1
2
3
4
5
6

.element {
  background: 
    url('/images/overlay.png'),      /* 最前面 */
    url('/images/pattern.png'),       /* 中間層 */
    linear-gradient(#3498db, #2ecc71); /* 最背面 */
}

各背景のプロパティ制御

複数背景を使用する場合、各プロパティもカンマ区切りで個別に指定できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

.element {
  background-image: 
    url('/images/icon.png'),
    url('/images/pattern.png'),
    linear-gradient(to bottom, #f8f9fa, #e9ecef);
  
  background-position: 
    top right,
    center,
    center;
  
  background-repeat: 
    no-repeat,
    repeat,
    no-repeat;
  
  background-size: 
    50px 50px,
    auto,
    cover;
}

複数背景の実践例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

/* オーバーレイ付きヒーローセクション */
.hero {
  min-height: 100vh;
  background: 
    linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.7)
    ),
    url('/images/hero-bg.jpg') center / cover no-repeat;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* パターンとグラデーションの組み合わせ */
.pattern-gradient {
  background: 
    url('/images/dots.svg') repeat,
    linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  background-blend-mode: overlay;
}

/* 複数のグラデーションで立体感 */
.layered-gradient {
  background: 
    radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 40%),
    linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

/* 装飾的なコーナー */
.decorated-box {
  background: 
    linear-gradient(135deg, #3498db 25%, transparent 25%) -50px 0,
    linear-gradient(225deg, #3498db 25%, transparent 25%) -50px 0,
    #f8f9fa;
  background-size: 100px 100px;
}

background-sizeによるサイズ制御

background-sizeプロパティは、背景画像のサイズを制御します。

基本構文

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

.element {
  background-image: url('/images/photo.jpg');
  
  /* キーワード */
  background-size: cover;    /* 要素を完全に覆う */
  background-size: contain;  /* 要素内に収まる最大サイズ */
  background-size: auto;     /* 元のサイズ（デフォルト） */
  
  /* 数値指定 */
  background-size: 200px 100px;  /* 幅 高さ */
  background-size: 50% 50%;      /* パーセンテージ */
  background-size: 200px auto;   /* 幅のみ指定、高さは自動 */
}

coverとcontainの違い

graph LR
    subgraph cover
        A[画像が要素を完全に覆う]
        B[はみ出した部分は切り取り]
        C[余白なし]
    end
    
    subgraph contain
        D[画像全体が表示される]
        E[余白が生じる可能性]
        F[切り取りなし]
    end
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

/* ヒーロー画像（余白なし） */
.hero-image {
  width: 100%;
  height: 400px;
  background: url('/images/hero.jpg') center / cover no-repeat;
}

/* ロゴ表示（全体表示） */
.logo-container {
  width: 200px;
  height: 100px;
  background: url('/images/logo.png') center / contain no-repeat;
}

アスペクト比を維持したサイズ指定

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

/* 幅を指定、高さは自動 */
.element {
  background-image: url('/images/photo.jpg');
  background-size: 300px auto;
  background-repeat: no-repeat;
}

/* 高さを指定、幅は自動 */
.element {
  background-image: url('/images/photo.jpg');
  background-size: auto 200px;
  background-repeat: no-repeat;
}

background-positionによる位置制御

background-positionプロパティは、背景画像の配置位置を制御します。

基本構文

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

.element {
  background-image: url('/images/icon.png');
  background-repeat: no-repeat;
  
  /* キーワード */
  background-position: center;
  background-position: top left;
  background-position: bottom right;
  
  /* 数値指定（X Y） */
  background-position: 100px 50px;
  background-position: 50% 50%;
  
  /* キーワードと数値の組み合わせ */
  background-position: right 20px top 30px;
}

位置キーワードの対応

キーワード X座標 Y座標
left 0% -
center 50% 50%
right 100% -
top - 0%
bottom - 100%

4値構文による精密な配置

4つの値を使用すると、特定の辺からのオフセットを指定できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.element {
  background-image: url('/images/icon.png');
  background-repeat: no-repeat;
  
  /* 右から20px、下から30pxの位置 */
  background-position: right 20px bottom 30px;
  
  /* 左から10%、上から50pxの位置 */
  background-position: left 10% top 50px;
}

実践的な配置例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

/* アイコン付きボタン */
.btn-icon {
  padding: 12px 24px 12px 48px;
  background: 
    url('/images/arrow.svg') left 16px center / 20px no-repeat,
    linear-gradient(135deg, #3498db, #2980b9);
  color: white;
  border: none;
  border-radius: 8px;
}

/* 装飾的な引用符 */
.blockquote {
  padding: 24px 24px 24px 60px;
  background: 
    url('/images/quote.svg') left 16px top 16px / 32px no-repeat,
    #f8f9fa;
  border-left: 4px solid #3498db;
}

/* フッターのロゴ配置 */
.footer {
  padding: 40px;
  background: 
    url('/images/logo-watermark.svg') right 40px bottom 40px / 120px no-repeat,
    #1a1a2e;
}

background-originとbackground-clip

これらのプロパティは、背景の配置基準と描画範囲を制御します。

background-origin

背景画像の配置基準となるボックスを指定します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

.element {
  border: 10px dashed #3498db;
  padding: 20px;
  background: url('/images/pattern.png');
  
  /* ボーダーボックス基準 */
  background-origin: border-box;
  
  /* パディングボックス基準（デフォルト） */
  background-origin: padding-box;
  
  /* コンテンツボックス基準 */
  background-origin: content-box;
}

background-clip

背景が描画される範囲を指定します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

.element {
  border: 10px dashed #3498db;
  padding: 20px;
  background: linear-gradient(#3498db, #2ecc71);
  
  /* ボーダーボックスまで描画（デフォルト） */
  background-clip: border-box;
  
  /* パディングボックスまで描画 */
  background-clip: padding-box;
  
  /* コンテンツボックスのみ描画 */
  background-clip: content-box;
  
  /* テキスト部分のみ描画 */
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

テキストへのグラデーション適用

background-clip: textを使用すると、テキストにグラデーションを適用できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

.gradient-text {
  font-size: 48px;
  font-weight: bold;
  background: linear-gradient(90deg, #f093fb, #f5576c, #f093fb);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shine 3s linear infinite;
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

背景デザインの実践パターン

実務で使える背景デザインパターンをまとめます。

メッシュグラデーション風

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.mesh-gradient {
  background: 
    radial-gradient(at 40% 20%, hsla(28, 100%, 74%, 1) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsla(189, 100%, 56%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsla(355, 100%, 93%, 1) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsla(340, 100%, 76%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 100%, hsla(22, 100%, 77%, 1) 0px, transparent 50%),
    radial-gradient(at 80% 100%, hsla(242, 100%, 70%, 1) 0px, transparent 50%),
    radial-gradient(at 0% 0%, hsla(343, 100%, 76%, 1) 0px, transparent 50%);
}

ガラスモーフィズム

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

.glassmorphism {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
}

/* 背景付きコンテナ */
.glass-container {
  position: relative;
  background: 
    linear-gradient(135deg, 
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.05)
    );
  backdrop-filter: blur(20px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

グリッドパターン

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

.grid-pattern {
  background: 
    linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  background-color: #fff;
}

/* ドットパターン */
.dot-pattern {
  background: 
    radial-gradient(circle, #000 1px, transparent 1px);
  background-size: 20px 20px;
  background-color: #fff;
}

アニメーション付きグラデーション

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

.animated-gradient {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

パフォーマンスの考慮事項

背景を使用する際のパフォーマンス最適化について解説します。

画像の最適化

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* 適切なサイズの画像を使用 */
.hero {
  /* 高解像度ディスプレイ対応 */
  background-image: url('/images/hero-2x.jpg');
  background-size: cover;
}

@media (-webkit-max-device-pixel-ratio: 1) {
  .hero {
    background-image: url('/images/hero-1x.jpg');
  }
}

will-changeの使用

アニメーションする背景にはwill-changeを使用してパフォーマンスを向上させます。

1
2
3
4
5
6

.animated-bg {
  will-change: background-position;
  background: linear-gradient(45deg, #3498db, #2ecc71);
  background-size: 200% 200%;
  animation: gradient-move 5s ease infinite;
}

background-attachmentの注意点

background-attachment: fixedはモバイルデバイスでパフォーマンスの問題を引き起こす可能性があります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.parallax {
  background-attachment: fixed;
}

/* モバイルではfixedを無効化 */
@media (max-width: 768px) {
  .parallax {
    background-attachment: scroll;
  }
}

まとめ

本記事では、CSSの背景プロパティについて体系的に解説しました。

背景プロパティを効果的に使用するためのポイントは以下のとおりです。

  • 基本プロパティの理解: background-color、background-image、background-repeat、background-position、background-sizeを適切に組み合わせる
  • グラデーションの活用: linear-gradient、radial-gradient、conic-gradientを使い分けることで、画像なしで魅力的な背景を実現できる
  • 複数背景の重ね合わせ: オーバーレイやパターンを組み合わせることで、複雑なビジュアル表現が可能
  • パフォーマンスの考慮: 画像の最適化、will-changeの適切な使用、モバイル対応を忘れずに

次の記事では、CSSトランジションを使ったスムーズなアニメーション効果の実装について解説します。背景とトランジションを組み合わせることで、よりインタラクティブなUIを作成できるようになります。

参考リンク