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

自由が丘で働くWeb屋のブログ

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

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

ホームページを作成する際、メインコンテンツの両側に背景を指定したい時など、背景画像を中央に配置したい時があります。
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』に書き換えます。

 
カテゴリー:Webシステム開発
タグ:
2012年11月22日 11時25分
 

関連記事

 

コメントを書く

(C) 自由が丘で働くWeb屋のブログ