[CSS] 背景画像をセンタリングする方法
[CSS] 背景画像をセンタリングする方法
![[CSS] 背景画像をセンタリングする方法](http://blog.diginnovation.com/wp-content/uploads/background_center_00.jpg "[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』に書き換えます。
