2012-03-06 51 views
3

私はdiv background-image overflowと同じ問題を抱えています: 私は、同じ背景で「ヘッダー」と「フッター」が必要なページがあります。 ヘッダーのすぐ下に大きなイメージがあり、最後にこのイメージの下にコンテンツがあります。背景が消える大きな画像

すべてのコンテンツ(ヘッダー/フッター/イメージを含む)は中央に配置されており、問題は画像(幅:1600ピクセル)とブラウザのサイズによって決まります... 1600ピクセル未満ではスクロールでき、 ...私もそれらを拡張したいのですが... (ヘッダー/フッターと同じ背景でボディエレメントを設定できますが、コンテンツには欠けています...)

ここにありますan example of my problemというjsFiddleを使って、私は正しいバックグラウンドを設定するためにさまざまな部分の周りにWrapsを持っていました。

ここでここで、通常の動作、フルサイズのスクリーンHere is the normal behavior

は、問題となっているブラウザがコンテンツよりも小さい場合、スクロールバーが表示され、背景が消えている... Here is the problem

私は回避策を見つけるために多くのことを試みました。小さい解像度のユーザーが '中心のコンテンツ'を見つけるために多くのスクロールが発生するため、私は身幅に1600pxを設定することはできません(実際の場合)。

アドバイスがある場合や、私の問題に対する別のアプローチがある場合は、事前に感謝してください!

最終編集: - (背景画像とオーバーフローを使用して:imagewrapに隠れている)@Happyシンコード各コンテンツ要素の最小幅の私添加しました。 The final jsFiddle

+0

この画像は背景画像である必要があります... – soju

+0

私たちに見せたいリンクがありませんか?上記のように - ここでは正常な動作、フルサイズの画面ですここでは正常な動作です、ここで問題は、ブラウザが小さい... ....ですか? – w3uiguru

+0

@HappySingh:2つの画像(あなたが言及したタイトルを持つ)を見ることができますか? – Xasz

答えて

3

このフィドルを試してみてくださいhttp://jsfiddle.net/3KtSf/あなたの問題が正しい場合は、あなたの解決策かもしれません。

UPDATE:コメントごとの要件として

改訂フィドル(http://jsfiddle.net/ux2pj/1/)。

フィディードの画像は背景からのものなので、画像の幅/高さは500 x 367pxです。

+0

画像は常に元の幅で、高解像度で楽しんでいる人がいなければなりませんそれは完全なサイズで、解像度の低い人で、ちょうど中間の部分です。だからストレッチングは解決策ではありません:(お返事ありがとうございます。 – Xasz

+0

OKイメージのサイズを縮小したり拡大したりする必要はありません。もう一度試してみましょう – w3uiguru

+0

Please私はこの問題を解決したいと思っています。 – w3uiguru