2012-03-04 21 views
2

私は背景画像に使用する一つの大きな画像(1000px x 1000px)を持っている...背景画像のビューポートは中央に配置されていますか?

を前に、このようなウェブサイトを扱っていないが、ここで私が達成しようとしてんだよ決してきました。コンテンツそのものは500px x 500px程度しか占めず、バックグラウンド画像に対して常に同じ位置にある必要があります。

これは、記述するために複雑になっているので、私は絵作りましょう:それは難しいが、何のブラウザは私の11よりも大きい場合になりますように

enter image description here

これ自体はいないようですが"画面?ブラウザが背景画像には大きすぎる場合、私は単純な色を表示したい。

私が見る他の問題は、常に表示されないように表示されないスクロールバーブラウザのウィンドウがコンテンツボックスよりも小さい場合

私が達成しようとしていることを言葉に入れるのが難しいので、もっと明確にすることができます。

+0

+1画像 –

答えて

3

使用CSS:アップbackground-colorbackground-imagebackground-positionbackground-repeat(この順序で)

HTML{ width:100%; height:100%; 
     background:#F00 url(path/to/your/image.jpg) center center no-repeat; 
     background-attachment: fixed; 
     background-size:100% auto; 
} 

background合計。他の2つは現在backgroundに含まれていません(ただし、W3C仕様には別途記載されています)。

background-attachment:fixedはレイヤーに似ており、ユーザーがスクロールする方法に関係なく画像が表示されたままであることが保証されます。あなたはそれをしたくない場合は、あなたのコンテンツを中心にコンテナをラップし、それに代わりのHTML -node

background-sizeに上記の宣言を割り当てる値を使用して背景にビットを プレーを画像をスケール - 私が提案したものをビューポートの幅に合わせて画像を拡大/縮小します。 100% 100%は、ビューポート全体を常にカバーするように伸ばし、auto 100%はビューポートの高さに合わせてスケーリングします。いくつかのクリッピングが発生する可能性があるautoを使用どちらの場合も - や背景色(私は赤を選んだ)&下

width:100%;height:100%あなたは白い境界線を持っていない確認しますHTML -nodeを与えるトップ/サイドに表示されますあなたのコンテンツが画面いっぱいに満たない場合は

3

どのような問題があるのか​​はっきりしません。ここであなたがしたいかもしれないものの例です。http://jsfiddle.net/mhgdZ/

+1

これは奇妙だった;) – Sliq

関連する問題