css - スマートフォンでのWebサイト表示非対応

Question

X 軸で画像を繰り返した結果、上部にメニュー バーが表示されるように設計された Web ページがあります。

width: 900px;
margin: 0 auto;
background-image: url(/images/white-fade-short.png);
background-repeat: repeat-x;

メニュー リンクは、上記の画像を背景として記載されています。この Web サイトは、デスクトップ上で完全に正常に表示されます。しかし、スマートフォンに読み込まれると、バーの画像が実際の Web ページのサイズよりも大きくレンダリングされ、特定の長さまでスクロールします。どうすればこれを修正できますか。次の css プロパティも、スマートフォンのディスプレイに対応するように設定されています。

@media screen and (max-width: 1024px){
        img.bg {
            left: 50%;
            margin-left: -512px; }
    }

このコードは何らかの問題を引き起こしていますか?