ブラウザウィンドウを越えて画像が広がるのを防ぐには、ページの幅を設定しますか？

Question

私は現在、開発中のサイトのナビゲーションシステムとして機能している長い画像を持っています。あなたはそれを見ることができますhere。このナビゲーションシステムは最終的にはより小さなセクションに分割されますが、今見ているのと同じ問題をよく見かけると思います。

画像は1920ピクセル幅ですが、ユーザーのブラウザウィンドウ（最大1920ピクセル）では、ナビゲーション画像（ブランチ）は常に画面から外れることが考えられます。ナビゲーションシステムの中央にある葉は、常に上のロゴに一致するようにページの中央に配置する必要があります。

ナビゲーションDIVは現在、次のCSSを持っています

#nav { 
    position: absolute; 
    top: 210px; 
    left: 50%; 
    margin-left: -960px; 
} 

体が900pxの最小幅を有しています。

は、私は、このセットアップを持っています二つの問題があります：あなたはページを訪問したときに表示されるように

1. 、ブラウザページの幅が長い画像の右端のためにより設定されていますブラウザウィンドウの幅が900pxより大きいときは100％に設定し、ブラウザウィンドウの幅が900pxより小さいときは900px（水平スクロールバーを使用）に設定したいと思うときは、ナビゲーションシステムを使用します。

2. ナビゲーションシステムは、ブラウザウィンドウの幅が900px未満であっても、左に移動し続けますが、残りのページコンテンツは、 t。

誰かがこれらの問題を解決できますか？

私はどうなるのかおかげで、

ニック

Answer 1

は

1. は、画像（実際のコンテンツとの1）の中央部分を切り出します。

2. 無限に繰り返すことができる線の背景からスライスを取り出します。これと同じように：

3. 不拡大せずに、あなたに無限にサイズ変更可能なナビゲーション領域を与える100％の幅であり、

   background-image: url(/path/to/slice.png); 
   background-repeat: repeat-x; 
   

を持ってdivに画像の中央部分を入れてページ。