ホーム＞HTMLリファレンス（アルファベット検索）＞background-positionプロパティ
background-position プロパティ …背景画像の表示位置を指定する
使用プロパティ
 |
background-position: 値; |
対象となる
要素 |
すべて |
継承 |
しない
|
値 |
次項（値と働き）を参照 |
 |
      |
|
値
（カッコ内のように指定しても同じように表示されます） |
働き |
値
（カッコ内のように指定しても同じように表示されます） |
働き |
left top
（top left）
（0% 0%） |
左上に表示されます。 |
center top
（top center）
（top）
（50% 0%） |
横方向が中央で、縦方向が上側に表示されます。 |
right top
（top right）
（100% 0%） |
右上に表示されます。 |
left center
（center left）
（left）
（0% 50%） |
横方向が左側で、縦方向が中央に表示されます。 |
center center
（center）
（50% 50%） |
横方向が中央で、縦方向も中央に表示されます。 |
right center
（center right）
（right）
（100% 50%） |
横方向が右側で、縦方向が中央に表示されます。 |
left bottom
（bottom left）
（0% 100%） |
左下に表示されます。 |
center bottom
（bottom center）
（bottom）
（50% 100%） |
横方向が中央で、縦方向が下側に表示されます。 |
right bottom
（bottom right）
（100% 100%） |
左下に表示されます。 |
パーセンテージ |
表示位置を左から横方向の位置と、上から縦方向の位置を半角空白で区切ってパーセンテージで指定します。 |
| 単位付きの長さ |
表示位置を左から横方向の位置と、上から縦方向の位置を半角空白で区切って単位付きの長さで指定します。 |
|
|
使用例
記述例
<html>
<head>
<title>HOME PAGE ZERO ガイド</title>
<!--スタイルシート-->
<style type="text/css">
body {
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<!--ページの本文-->
<body>
<p>背景の中央に画像を１つ表示します。</p>
</body>
|
|
[ブラウザでの表示例]
| HOME PAGE ZERO ガイド |
|
表示例は初心者ガイドの「背景画像の表示位置を指定をしよう！」というページの「使用例の表示」を参考にしてください。
|
△ページトップへ
ホームページ初心者ガイド|
HTML|
CSS|
ホームページお役立ち情報|
ホームページレベルアップ情報|
その他
解説
background-position 
