TopCSS > 2014年5月
2014年5月20日

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

May 20,2014 1:23 AM
Tag:[, ]
Permalink

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

イメージ
CSSで背景画像をページの中心に表示

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

1.問題点

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

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

背景画像をページの中心に表示するには、中心に表示させたい領域の要素(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-attachmentプロパティとbackground-positionプロパティの組み合わせによる画像配置イメージ

background-repeat

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

3.プロパティをひとつにまとめる

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

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

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

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

Comments [0] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3