CSS での背景画像の中央配置

CSSの背景画像を中央に配置するには、background-position: centerを設定します。画像をコンテナーいっぱいに表示する場合はbackground-size: coverを加えます。縦横比は保たれますが、画像の端が切れることがあります。画像を繰り返し並べず1枚だけ表示するには、background-repeat: no-repeatを設定します。これらのプロパティの役割はそれぞれ異なり、位置、サイズ、繰り返しの有無を指定します。

CSSの背景プロパティで背景画像を中央に配置する

背景画像を表示する領域を持つ要素に、背景を設定します。この例では.heroの高さがビューポート以上になります。photo.jpgは画像へのパスに置き換えてください。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .hero {
      min-height: 100vh;
      background-image: url("photo.jpg");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
  </style>
</head>
<body>
  <main class="hero"></main>
</body>
</html>

background-position: centerは、.hero内で画像を水平方向と垂直方向の中央に配置します。2語の値center centerも同じ意味です。background-size: coverはコンテナー全体を覆うまで画像を拡大するため、画像とコンテナーの縦横比が異なると、一方向の端が切れることがあります。画像全体を表示するにはbackground-size: containを使います。この場合、コンテナー内に余白ができることがあります。画像を元の寸法のまま表示するには、background-sizeを省略します。

background-repeat: no-repeatは画像のタイル状の繰り返しを防ぎますが、画像のサイズ変更や中央配置は行いません。画像がコンテナーより小さい場合、既定の繰り返し動作では画像が並ぶことがあるため、それを避けたい場合にno-repeatを使います。background-attachmentは、背景をページと一緒にスクロールさせるか、ビューポートに対して固定するかを指定します。これは省略可能で、画像の中央配置には関係しません。これらの宣言はbackgroundの一括指定にもまとめられますが、個別のプロパティを使うと設定ごとに調整しやすくなります。

この例を実行すると、同じ宣言をスタイルシートにコピーできるCSSテキストとして整形できます。

const declarations = {
  backgroundImage: 'url("photo.jpg")',
  backgroundRepeat: "no-repeat",
  backgroundPosition: "center",
  backgroundSize: "cover"
};

for (const [property, value] of Object.entries(declarations)) {
  const cssName = property.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
  console.log(`${cssName}: ${value};`);
}

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

ビューポート全体に画像要素を配置する別の方法

画像がコンテンツである場合や、支援技術から利用できる必要がある場合は、img要素を使う方法もあります。これはCSSの背景画像ではありません。ページのコンテンツの背後でビューポート全体に広げるには、固定配置にして四辺すべてにオフセットを指定し、コンテンツの後ろに配置します。この方法で要素を配置するには、top、right、bottom、leftを有効にするpositionプロパティが必要です。

<img class="viewport-image" src="photo.jpg" alt="">
<main class="page-content">
  <h1>Page content</h1>
</main>
<style>
  .viewport-image {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
</style>

このHTML例に表示される見出しは「Page content」で、英語のままです。ここでinset: 0を指定すると、top、right、bottom、leftがすべて0になり、配置されたボックスがビューポート全体に広がります。object-fit: coverは縦横比を保ちながら画像をボックスいっぱいに拡大し、画像の一部を切り取ることがあります。画像全体を表示するにはobject-fit: containを使いますが、余白ができる場合があります。altを空にするのは画像が装飾目的の場合に限ります。画像が情報を伝える場合は、意味のある代替テキストを指定してください。実際のページでは、画像の上に重なるテキストが読みやすいことも確認してください。装飾的な背景だけが目的なら、最初の方法のほうが簡単で、文書に画像要素を追加せずに済みます。