Home
/
背景の指定
/ 背景画像の表示位置の指定 :
background-position
背景画像の表示位置の指定 :
background-position
::: 書 式 :::
background-position
: 横位置 縦位置
::: プロパティ値 :::
横位置・縦位置には、下記の値を指定します。
単位付きの数値 (左上原点) => 「
単位について
」を参照
% (左上原点)
center (50%と同じ)
left (横位置のみ)(0%と同じ)
right (横位置のみ)(100%と同じ)
top (縦位置のみ)(0%と同じ)
bottom (縦位置のみ)(100%と同じ)
::: 解 説 :::
「
background-position
」プロパティで、指定した背景画像の表示位置を設定します。
横位置と縦位置を、半角スペースで区切ります。
横位置と縦位置に、単位付きの数値または%を指定した場合で、その値がひとつの時は、横位置に値が適用され、縦位置は「50%」の位置になります。
::: 対応ブラウザ :::
IE
Firefox
Opera
Chrome
Safari
8
7
6
5.5
5
3.5
3
2
1.5
1
10
9
8
7
6
2
1
4
3
2
1
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
○
[ 対応状況 : ○=対応、△=一部対応、×=未対応 ]
::: サンプル :::
[ サンプル画面
]
スタイルシート(CSS) = 背景画像の表示位置の指定 =
スタイルシート(CSS) = 背景画像の表示位置の指定 =
「background-position: 0% 0%」を指定
「background-position: 50% 50%」を指定
「background-position: 100% 100%」を指定
「background-position: left top」を指定
「background-position: center center」を指定
「background-position: right bottom」を指定
</body> </html>
関連項目
CSSの基本
CSS機能別プロパティ一覧
CSSインデックス
背景の指定
background
background-color
background-image
background-repeat
background-position
background-attachment
Copyright (C) 2009 Html-Labs All Rights Reserved.
横位置と縦位置を、半角スペースで区切ります。
横位置と縦位置に、単位付きの数値または%を指定した場合で、その値がひとつの時は、横位置に値が適用され、縦位置は「50%」の位置になります。