背景ブラウザにリサイズ、固定ではない

Question

私はバックグラウンドリサイザーが必要なウェブサイトを持っています。現在、私はこのようなサイトでSupersizedを使用しています。しかし、このサイトはユニークです。 Supersizedの問題は、常にフルスクリーンにリサイズされ、固定されたバックグラウンドであることです。

私は、ブラウザにサイズ変更する背景イメージを作成しようとしていますが、必ずしもそのイメージを埋め込む必要はありません。

たとえば、600px x 600pxの画像がある場合、ブラウザの幅が1200pxで1200px x 1200pxのウェブサイトでサイズを変更したいとします。ウェブサイトの高さが1800px（スクロールあり）の場合でもそして、それはページのトップにとどまっています（絶対配置、固定ではありません）。したがって、サイトの1200pxの高さは画像になり、サイトの下部にある残りの600pxはボディの背景スタイルが設定されたものになります。

これは可能ですか？

Answer 1

あなたが探しているのは、CSS3プロパティのbackground-sizeです。あなたはdiv要素に背景画像を設定したいと仮定すると、あなたはそのdiv要素の幅や背景、サイズが100％を確認する必要があり、ノー・リピートに背景画像を設定します：

#background_image { 
    width: 100%; 
    background: url('path/to/image.jpg') no-repeat red; 
    background-size: 100%; 
}​ 

は見てみましょう：http://jsfiddle.net/PgnvQ/