Style backgroundPosition 属性

定義と使用方法

backgroundPosition 属性設定または返却値は、要素内での背景画像の位置を指定します。

も参照してください：

HTML スタイル：background 属性

CSS チュートリアル：CSS 背景

CSS3 チュートリアル：CSS3 背景

CSSリファレンスマニュアル：background-image 属性

CSSリファレンスマニュアル：background-position 属性

例

例1

背景画像の位置を変更します：

document.body.style.backgroundPosition = "top right";

実際に試してみてください

例2

div要素の背景画像の位置を下中央に変更します：

document.getElementById("myDiv").style.backgroundPosition = "center bottom";

実際に試してみてください

例3

<div>要素内の背景画像の場所を水平200ピクセルと垂直40ピクセルに変更します：

document.getElementById("myDiv").style.backgroundPosition = "200px 40px";

実際に試してみてください

例4

<div>要素内の背景画像の場所を返します：

document.getElementById("myDiv").style.backgroundPosition;

実際に試してみてください

構文

backgroundPosition属性の返り値：

object.style.backgroundPosition

backgroundPosition属性の設定：

object.style.backgroundPosition = value

属性値

値 説明
  • top left
  • top center
  • top right
  • center left
  • center center
  • center right
  • bottom left
  • bottom center
  • bottom right
 キーワードを1つ指定した場合、もう1つの値は"center"になります。
x% y%

x値は水平位置、y値は垂直位置を示します。

左上角は0% 0%、右下角は100% 100%です。

値を1つ指定した場合、もう1つの値は50%になります。
xpos ypos

x値は水平位置、y値は垂直位置を示します。

左上角は0 0です。単位はピクセル(0px 0px)や他のCSS単位になります。

値を1つ指定した場合、もう1つの値は50%になります。%と単位を混ぜて使用できます。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性を親要素から継承します。参照してください inherit。

技術的詳細

デフォルト値： 0% 0%
返り値： 背景画像の場所を示す文字列です。
CSSバージョン： CSS1

ブラウザのサポート

backgroundPosition CSS1 (1996) の特性です。

すべてのブラウザで完全にサポートされています：

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
サポート サポート サポート サポート サポート サポート