css - CSSの垂直方向の背景へのストレッチ

Question

背景画像を（CSSを使用して）垂直方向に拡大できないようで、取得できませんでした。jqueryプラグインを使用せずにこれを行うための最良の方法は何ですか？

http://realestateunusual.com/

現在持っている

div#whitewrap {position:fixed; top:0; left:0; width:100%; height:100%;}

Answer 1

質問は明確ではありませんが、ページの下部に家を表示したいと思いますか？

body必要がない限り、は画面に表示されません。したがって、whitewrapdivはの100％しか埋めませんbody。

身長も100％に設定する必要があります（これは少しハッキーですが）かbody、画像の背景を設定します。これにより、画面の下部に背景画像が表示されます（体が完全な高さではないにもかかわらず、混乱しますよね？）。

ただし、HTMLを作成するために使用したソフトウェアが原因で、HTMLを検査するのは困難です。これはdiv、私が考えていたよりも多くのsを追加しているためです。

編集：background-position詳しく調べた後、画像を下に強制するために属性を設定する必要があるように見えます。次に、background-color画像の上部にある空の色と同じになるようにを設定できます。これにより、画像を実際に伸ばしたり歪ませたりすることなく、希望する効果を作成できます。

Answer 2

これは、CSSを使用して完全に行うことができます：background-size属性を使用します。

body {
    background-image: url(http://placekitten.com/250/150);
    background-size: 100%;
    }

http://jsfiddle.net/5TSVP/を参照してください。

Answer 3

CSSでメディアクエリを調べて、主要なプラットフォーム用にさまざまな解像度の画像を保存する必要があります。その後、画像はブラウザを使用してサイズを変更できます。

メディアクエリ： http ：//www.w3.org/TR/css3-mediaqueries/

@media (min-width:800px) { background-image: url(bg-800.jpg) }
@media (min-width:1024px) { background-image: url(bg-1024.jpg) }
@media (min-width:1280px) { background-image: url(bg-1280.jpg) }

サイズを変更するためのimgタグのCSS：

img { max-width:100%; }