background-position

プロパティの説明

background-positionは、背景画像の位置を指定するプロパティです。background-repeatで繰り返しを指定した場合は、その位置を基準に繰り返されることになります。全ての要素に指定することができます。

指定できる値

値は１つか２つ指定することができます。１つだけ指定した場合は右方向への背景位置を指定したことになり、縦方向への背景は真ん中に表示されることになります。２つ指定した場合は１つめの値が右方向、２つめの値が上から下への縦方向の背景位置を指定したことになります。

パーセント
50%で中央に背景を表示する。
left, center, right
右方向への背景位置を決める。
top, center, bottom
縦方向への背景の位置を決める。

サンプル

サンプルページ

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "https://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <title>サンプルページ</title>
 <style type="text/css">
 <!--
 .b1{
 color:#000000;
 background-color:#cccccc;
 background-image:url(../img/wp/wall.gif);
 background-repeat:repeat-x;
 background-position:50% 50%;
 }
 .b2{
 color:#000000;
 background-color:#cccccc;
 background-image:url(../img/wp/wall.gif);
 background-repeat:no-repeat;
 background-position:right top;
 }
 -->
 </style>
</head>

<body>
 <h1>サンプルページ</h1>
 <p class="b1">背景画像位置を縦方向中央指定しています。</p>
 <p class="b2">背景画像位置を右上に指定しています。</p>
</body>

</html>