備忘録的プログラミングリファレンス

background-positionプロパティ

 background-positionプロパティは、背景画像の表示開始位置を指定するプロパティです。

 background-imageによる背景画像はデフォルトでは左上が表示開始位置で、繰り返し表示します。

背景画像の表示開始位置を中央(50%、50%)に(Exampleを参照
background-position: 50% 50%;

 デフォルトの繰り返し表示を1回だけにするには background-repeat で no-repeat を使用します。

 背景画像を一括して設定するにはbackgroundプロパティを使用します。

関連プロパティ

 以下は background-position プロパティに関連するプロパティです。

プロパティ名概要
backgroundバックグランドプロパティの一括指定
background-attachmentスクロールによるバックグランドの表示位置
background-blend-mode複数の背景画像や配色を混ぜ合わせる
background-clipborder、paddingを領域に含めるか
background-colorCSSのColorの指定
background-image画像の挿入
background-origin繰り返し表示を開始する位置
background-repeat画像の繰り返し(デフォルトは繰り返し)
background-size画像のサイズ
linear-gradient()線形グラデーション
radial-gradient()円形グラデーション

構文(Syntax)

CSS

background-position: value;

DOM(JavaScript)

値の取得
String=object.style.backgroundPosition
値の設定
object.style.backgroundPosition=_value_ 

値(Values)

Value摘要
0% 0%初期値(default value)、左上が開始位置
top,bottom,left,right,center左記のkeywordを組み合わせる
x% y%xは横方向の位置、yは縦方向の位置を割合で設定。0% 0%は左上の端。100% 100%は右下の端。もしも片方だけ設定するともう一方は50%になる。
xpx ypxxは横方向の位置、yは縦方向の位置をCSSで使える単位で設定。0px 0pxは左上の端。もしも片方だけ設定するともう一方は50%になる。%と組み合わせることができる。
initial初期値に戻す。
inherit親エレメントのプロパティを継承。

備考(Remarks)

初期値(Default value)0% 0%
継承(Inherited)no
変化(Animatable)yes

Example

 background-positionの表示例です。背景画像の表示位置が指定できます。 ここでは背景画像の繰り返し表示をしない設定にして、中央に表示するように指定しています。