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;
}記述順序は決まっていません。
値を省略した場合はデフォルト値が適用されます。
