【初心者向け】JavaScriptでbackground-positionを指定する方法｜CSSとの違いと実例コード

CSSでよく使う background-position は、JavaScriptからも指定できます。本記事では、キーワード（left, center など）や数値（px, %, em）による指定方法、X/Y個別指定、アニメーションの実装まで実例コード付きで解説。JavaScriptで背景画像の位置を自由にコントロールしたい方に役立ちます。

⒈ backgroundPosition の基本

JavaScript で指定する方法

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

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

backgroundPosition の指定方法

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

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

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

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

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

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

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

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

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

backgroundPosition の応用

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

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

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

⒉ backgroundPositionX / backgroundPositionY を個別に変更

See the Pen Untitled by hisayo simizu (@hisayo-simizu) on CodePen.

・→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方向だけ指定

→JavaScript で backgroundPosition を操作するときは、
console.log( element.style.backgroundPosition); で現在の値を確認するとわかりやすい！
ぜひ試してみましょう！

その他関連記事はこちら→Programming Notes