[CSS] 背景画像をセンタリングする方法

Webシステム開発

2012.11.22

ホームページを作成する際、メインコンテンツの両側に背景を指定したい時など、背景画像を中央に配置したい時があります。
CSSで背景画像をセンタリングする方法は以下から。

背景画像の準備

今回は背景画像の位置が分かりやすい様、縦横200pxの赤色画像を使用します。

背景画像を画面の中央に配置

<html>
<head>
<style>
body{
	background: url(background.gif) center;
	background-repeat: no-repeat;
}
</style>
</head>
<body>
CSS で背景画像をセンタリングする方法
</body>
<html>

背景画像を上付き中央に配置

<html>
<head>
<style>
body{
	background: url(background.gif) center top;
	background-repeat: no-repeat;
}
</style>
</head>
<body>
CSS で背景画像をセンタリングする方法
</body>
<html>

上部ではなく下部に配置したい場合は、CSS内の『top』を『bottom』に書き換えます。

背景画像を左寄せ中央に配置

<html>
<head>
<style>
body{
	background: url(background.gif) left center;
	background-repeat: no-repeat;
}
</style>
</head>
<body>
CSS で背景画像をセンタリングする方法
</body>
<html>

左寄せではなく右寄せにしたい場合は、CSS内の『left』を『right』に書き換えます。