小粋空間  -  a cheap joke and a play on words site

CSSで背景画像をページの中心に表示する方法

CSSで背景画像をページの中心に表示する方法を紹介します。

イメージ

このエントリーはCSSビギナーの方向けの内容です。

１．問題点

背景画像をページの中心に表示されるよう配置したいのですが、CSSの設定方法が不明です。

２．背景画像をページの中心に表示する

背景画像をページの中心に表示するには、中心に表示させたい領域の要素（body要素など）に次のように記述します。

body {
    background-image: url("sample.png");
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat
}

以下、各プロパティの意味と設定値について解説します。

background-image

background-imageプロパティは背景画像を指定します。

background-position

background-positionプロパティは背景画像の配置位置を指定します。ページの中心に配置するのであれば「center」を指定すればOKです。

background-attachment

background-attachmentプロパティは、ページのスクロールで背景画像を固定するか、あるいはスクロールにあわせて移動するかを指定します。 固定する場合は「fixed」を指定します。

なおbackground-positionに「center」を指定した場合、background-attachmentの値を「fixed」にすれば配置位置は表示領域の中心、background-attachmentの値を「scroll」にすれば配置位置はページ全体の中心になります（下図）。

プロパティに設定した値の違いよる画像の配置イメージ

background-repeat

background-repeatプロパティは背景画像の繰り返しを指定します。中心に配置するのであれば「no-repeat」をすればOKです。

３．プロパティをひとつにまとめる

前述の4つのプロパティをbackgroundプロパティにまとめて記述する場合は、次のようにすればOKです。

body {
    background: url("sample.png") fixed center no-repeat;
}

記述順序は決まっていません。

値を省略した場合はデフォルト値が適用されます。