【JavaScript】backgroundPositionの指定ルール！

2025年3月19日

JavascriptでbackgroundPositionを指定するには、CSSのルールに従って値を設定する必要があります。以下のポイントを押さえておくとスムーズに使えます。

⒈ backgroundPosition の基本

JavaScript で指定する方法

//js

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

・CSSと同じ書き方でOK
・”X方向　Y方向”の2つの値を半角スペースで区切る

backgroundPosition の指定方法

⒈キーワード（ left / right / top / bottom / center ）

//js

element.style.backgroundPosition = "left top";   // 左上
element.style.backgroundPosition = "center center"; // 中央
element.style.backgroundPosition = "right bottom"; // 右下

・水平（X軸）と垂直（Y軸）を組み合わせて指定
・ center を使うと中央揃えにできる

⒉数値（ピクセル / パーセント / emなど）

//js

element.style.backgroundPosition = "50px 100px";   // X = 50px, Y = 100px
element.style.backgroundPosition = "20% 80%";      // X = 20%, Y = 80%

・数値＋単位 ( px , % , em など)で指定可能
・％を使うと、要素の大きさに応じて背景位置を調整できる

⒊単独指定（X軸のみ or Y軸のみ）

//js

element.style.backgroundPosition = "left";  // X軸のみ（Yはデフォルト `center`）
element.style.backgroundPosition = "50%";   // X軸のみ（Yはデフォルト `center`）

・１つだけ指定したい場合、もう一方は center になる

backgroundPosition の応用

⒈Javascriptでアニメーションさせる

//js

let element = document.body;
let position = 0;

setInterval(() => {
  position += 10;
  element.style.backgroundPosition = `${position}px 0px`;
}, 100);

・ setinterval を使うと、背景をスクロールさせることができる

⒉ backgroundPositionX / backgroundPositionY を個別に変更

//js

element.style.backgroundPositionX = "100px";
element.style.backgroundPositionY = "200px";

・→X軸のみ変更
・→Y軸のみ変更 backgroundPositionX　backgroundPositionY

backgroundPosition のルールまとめ

指定方法	記述例	説明
キーワード	” left top”	左上
数値＋単位	” 50px 100px “	X＝50px Y=100px
パーセント	” 20% 80% “	X=20% Y-80%
単独指定	” left “	X=left Yはcenter
個別指定	backgroundPositionX=” 100px “	X方向だけ指定