CSS 入門

CSS 背景画像

背景画像はウェブページの視覚的な魅力を劇的に高め、単調なレイアウトを没入感のあるダイナミックな体験へと変えることができます。
これらはブランドイメージの確立、コンテンツの強調、あるいは純粋な美感の向上のために活用されます。
本章では、背景画像の追加、ポジショニング、および操作のためのさまざまなプロパティとテクニックを深く掘り下げていきます。

1. 背景画像の追加

background-image プロパティは、HTML要素の背景に画像を追加するために使用されます。このプロパティの値は、通常、画像ファイルへの URL を指します。

1.1 基本的な実装

背景画像を追加する最も簡単な方法は、画像の URL を指定することです。

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

この例では、"images" フォルダ内にある background.jpg が body 要素全体の背景として適用されます。画像パスが正しいことを必ず確認してください。

1.2 複数の背景画像

CSS では、単一の要素に複数の背景画像を指定することが可能です。各 URL をカンマで区切ります。画像はレイヤー状に重ねられ、リストの最初の画像が最も手前（閲覧者に近い側）に表示されます。

.my-element {
  background-image: url("images/overlay.png"), url("images/base.jpg");
}

この場合、overlay.png が base.jpg の上に重なって表示されます。重なり順（スタック順）は非常に重要です。また、background-color を併用することもでき、その色はすべての画像の一番後ろに適用されます。

1.3 画像フォーマットの指定

現代のウェブ開発では、さまざまな画像フォーマットがサポートされています。最も一般的なものは JPEG、PNG、GIF、SVG です。

  • JPEG: 写真に最適。有損圧縮のためファイルサイズが小さくなります。
  • PNG: はっきりしたラインの画像、テキスト、ロゴに最適。透過（透明度）をサポートし、無損圧縮です。
  • GIF: アニメーションをサポートしますが、色は限定的です。
  • SVG: ベクターフォーマット。アイコンやイラストに最適で、劣化なくスケーリング可能です。

背景画像で透過が必要な場合は、通常 PNG が選ばれます。写真のような背景には JPEG が適しています。

2. 背景のリピート (Background Repeat)

デフォルトでは、背景画像は水平および垂直方向にリピート（タイル状に配置）され、要素全体を覆います。background-repeat プロパティでこの挙動を制御します。

  • repeat: (デフォルト) 画像を水平・垂直の両方向にリピートします。
  • repeat-x: 画像を水平方向のみにリピートします。
  • repeat-y: 画像を垂直方向のみにリピートします。
  • no-repeat: 画像をリピートせず、一度だけ表示します。no-repeat を使用する場合は、background-position プロパティと組み合わせて位置を調整することが重要です。
.element-repeat {
  background-image: url("images/texture.png");
  background-repeat: repeat;
}

.element-repeat-x {
  background-image: url("images/horizontal-pattern.png");
  background-repeat: repeat-x;
}

.element-no-repeat {
  background-image: url("images/logo.png");
  background-repeat: no-repeat;
}

3. 背景のポジション (Background Position)

background-position プロパティは、背景画像の初期位置を指定します。水平位置と垂直位置の2つの値を指定できます。

3.1 キーワード

キーワードを使用して位置を指定できます：
top, bottom, left, right, center

.element-position-top-left {
  background-image: url("images/logo.png");
  background-repeat: no-repeat;
  background-position: top left;
}

.element-position-center {
  background-image: url("images/logo.png");
  background-repeat: no-repeat;
  background-position: center; /* 水平・垂直ともに中央揃え */
}

.element-position-bottom-right {
  background-image: url("images/logo.png");
  background-repeat: no-repeat;
  background-position: bottom right;
}

3.2 ピクセルとパーセンテージ

ピクセル値またはパーセンテージを使用することもできます。最初の値が水平オフセット、2番目が垂直オフセットです。0 0 は左上隅を指します。

.element-position-pixels {
  background-image: url("images/logo.png");
  background-repeat: no-repeat;
  background-position: 20px 30px; /* 左から20px、上から30px */
}

.element-position-percentages {
  background-image: url("images/logo.png");
  background-repeat: no-repeat;
  background-position: 50% 50%; /* 画像を中央に配置 */
}

パーセンテージは要素のサイズに対する相対値です。50% 50% は、要素のサイズに関わらず常に画像を中央に配置します。

4. 背景のサイズ (Background Size)

background-size プロパティは、背景画像の大きさを制御します。no-repeat を使用する場合や、画像を要素全体にフィットさせたい場合に特に有効です。

  • auto: (デフォルト) 画像のオリジナルサイズで表示します。
  • cover: 画像の縦横比を維持したまま、背景領域全体を覆うようにスケーリングします。画像の一部がトリミングされることがありますが、全画面背景などによく使われます。
.element-size-cover {
  background-image: url("images/large-image.jpg");
  background-size: cover; /* 完璧にエリアをカバーする。ヒーローセクションに最適 */
}
  • contain: 画像の縦横比を維持したまま、要素内に収まるようにスケーリングします。画像全体が表示されますが、比率が合わない場合は余白ができることがあります。
  • 長さとパーセンテージ: 100px 50px や 50% auto のように指定します。
.element-size-length {
  background-image: url("images/logo.png");
  background-repeat: no-repeat;
  background-size: 100px 50px; /* 幅100px、高さ50pxに設定 */
}

.element-size-percentage {
  background-image: url("images/image.jpg");
  background-size: 50% auto;
}

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

background プロパティは、複数の背景関連プロパティを一括で設定できるショートハンドです。値の順序は通常以下の通りです。

background: color image repeat position / size origin clip attachment;

示例：

.element-shorthand {
  background: #f0f0f0 url("images/pattern.png") repeat top left;
}

.element-shorthand-size {
  /* sizeを指定する場合、positionの後のスラッシュ / は必須です */
  background: url("images/image.jpg") no-repeat center/cover;
}

6. 実戦的なサンプル

6.1 全画面背景

ウィンドウサイズを変更しても常に画面全体を覆う背景を作成します。ポイントは background-size: cover の使用です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Full-Page Background</title>
<style>
body {
  background-image: url("images/your-image.jpg"); /* あなたの画像に差し替えてください */
  background-size: cover;       /* 重要：領域全体をカバー */
  background-repeat: no-repeat;
  height: 100vh;                /* 背景がビューポートの高さ全体を覆うように設定 */
  margin: 0;                    /* デフォルトのbody外辺距を削除 */
}
</style>
</head>
<body>
</body>
</html>

6.2 リピートテクスチャ

小さなシームレステクスチャ画像を繰り返し表示させます。background-repeat: repeat を使用します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Repeating Texture</title>
<style>
.texture-container {
  width: 300px;
  height: 200px;
  background-image: url("images/texture.png"); /* あなたのテクスチャ画像に差し替え */
  background-repeat: repeat;
  border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="texture-container"></div>
</body>
</html>

6.3 ロゴのポジショニング

ヘッダー要素の右上にロゴを1つだけ配置します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Logo Placement</title>
<style>
header {
  width: 100%;
  height: 100px;
  background-color: #eee;
  background-image: url("images/logo.png"); /* あなたのロゴに差し替え */
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 80px; /* 必要に応じてサイズを調整 */
}
</style>
</head>
<body>
<header></header>
</body>
</html>