ホーム＞コース別ガイド一覧＞背景画像を好きな位置に配置しよう！
背景画像を好きな位置に配置しよう！（background-position プロパティ） |
 
|
使用プロパティ セレクタ { background-position: 繰り返しパターン; }
CSS一覧プロパティ辞典 … background-position プロパティ
background-position プロパティを使うと、background-image プロパティで指定した背景画像の繰り返しを開始する位置を指定できます。background-repeat プロパティの値を「no-repeat」とした場合、１つの背景画像の表示位置を好きな位置に配置できます。値は横方向の位置と縦方向の位置を半角スペースで区切って指定します。
| 値 |
説明 |
| パーセンテージ（横） パーセンテージ（縦） |
パーセンテージを指定する場合、左からの位置と上からの位置を指定します。 |
| 長さ（横） 長さ（縦） |
長さ（単位の付いた長さ）を指定する場合、左からの位置と上からの位置を指定します。 |
| left top |
左上に表示されます。 |
| center top |
中央の上に表示されます。 |
| right top |
右上に表示されます。 |
| left center |
左の中央に表示されます。 |
| center center |
中央に表示されます。 |
| right center |
右の中央に表示されます。 |
| left bottom |
左下に表示されます。 |
| center bottom |
中央の下に表示されます。 |
| right bottom |
右下に表示されます。 |
使用例
body 要素に背景画像を表示しますので、セレクタに body 要素を入力し background-imege プロパティを指定します。その際、background-position プロパティを使用し値を「center center」として背景画像をWebページ中央に配置しましょう！画像は同じフォルダ内のファイルを参照するとして、相対パスで指定しているので、ファイル名（ここでは「haikei1.gif」）をそのまま記述します。なお、使用画像は下の画像を使用しています。
記述例
<html>
<head>
<title>一人暮らしの前向き料理</title>
<style type="text/css">
body {
background-color: moccasin;
background-imege: url(haikei1.gif);
background-repeat: no-repeat;
background-position: center center;
}
h1 {
text-align: center;
}
span{ font-weight: bold; }
p {
text-align: center;
line-height: 1.7em;
}
p.copy { font-family: "Ｍ ＳＰ明朝",serif; }
</style>
</head>
<body>
<h1>簡単に作れるワンポイント料理</h1>
<p>料理を少しおいしくするための<br>
ワンポインを紹介します！</p>
<p>おいしいチャーハンの作り方</p>
<p class="copy">Copyright © 2007 TomMY. All Rights Reserved.</p>
</body>
</html>
|
|
[記述例適応前のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
 |
[background-positionプロパティ適応し背景画像を中央に表示した場合のブラウザでの表示例]
| 一人暮らしの前向きな料理 |
簡単に作れるワンポイント料理
料理を少しおいしくするための
ワンポイントを紹介します！
おいしいチャーハンの作り方
Copyright © 2007 TomMY. All Rights Reserved. |
|
このように、背景画像が中央に表示されます！
