[新着] Webテンプレートを仮オープンしました
background-position は、背景画像の表示位置を指定するプロパティです。
div {
background-image: url(image/back.gif);
background-repeat: no-repeat;
background-position: center;
}
| background-position | 横方向と縦方向の位置を指定します |
|---|
横方向と縦方向の位置は、それぞれ次の内容で指定します。
| 横方向 | left（左） | center（中央） | right（右） |
|---|---|---|---|
| 縦方向 | top（上） | center（中央） | bottom（下） |
（例1）
background-position: right bottom; … 右下に表示
background-position: center center; … 中央に表示
上記例のように、横方向の位置と縦方向の位置を、半角スペースで区切って記述します。
（例2）
background-position: right; … 右の中央に表示
background-position: bottom; … 下の中央に表示
background-position: center; … 中央に表示
上記例のように、横か縦、どちらか1つだけで指定することもできます。省いた方の位置は自動的に中央になります。
【数値で指定する場合】
位置の指定は、数値+単位（px、他） や %（割合）などで指定することもできます。
横方向の位置を左からの距離で、縦方向の位置を上からの距離で指定します。
（例3）
background-position: 100px 40px; … 左から100px、上から40pxの位置に表示
background-position: 30% 60%; … 左から30%、上から60%の位置に表示
上記例のように、左からの距離と上からの距離を、半角スペースで区切って記述します。
（例4）
background-position: 100px; … 左から100px、上から50%の位置に表示
background-position: 50%; … 左から50%、上から50%の位置に表示
上記例のように、横方向だけで指定することもできます。この場合、縦方向の位置は自動的に50%になります。
<html>
<head>
<title>TAG index Webサイト</title>
<style type="text/css">
<!--
div {
width: 70%;
height: 200px;
margin: 10px 0;
background-color: #ffffff;
background-image: url(image/back.gif);
color: red;
}
#example1 {
background-repeat: no-repeat;
background-position: center;
}
#example2 {
background-repeat: repeat-x;
background-position: left bottom;
}
-->
</style>
</head>
<body>
<div id="example1">1つの画像を中央に表示</div>
<div id="example2">横並びの画像を下に表示</div>
</body>
</html>
▼これをブラウザで見ると次のように表示されます
（この画像を背景にしています）
