javascript - javascriptを使用してx軸で繰り返される画像を動的に中央に配置する方法は?

Question

幅が 1500px で、x 軸で繰り返される背景画像があります。画像の中心が常に画面の中央になるように、ユーザーのビューポート幅に関係なく、この画像を動的に中央に配置したいと思いますか?

JavaScriptでこれを達成するにはどうすればよいですか?

Answer 1

これには JavaScript は必要ありません。

background-position: center center;
background-repeat: repeat-x;

その行により、画像が常に要素の中央に配置され、その要素の中央から繰り返されることが保証されます。background-position の詳細については、こちらをご覧ください。

Answer 2

ここで質問を誤解したのかもしれませんが、これは CSS だけでできると思います。

.container {
  background: url('path/to/image') repeat-x 50% 0;
}

それはあなたが念頭に置いていたことですか？