背景画像が完全に伸びていない

先日ウェブサイトを立ち上げ、奇妙なCSS間違いがないと思ったが、明らかにそうではない。私がここでやろうとしているのは、ページを高さと幅に合わせるためにイメージを伸ばすことです。背景画像が完全に伸びていない

問題： 私は次のマークアップを持っている：

<img src="images/night_sky7.jpg" class="stretch" />

とそれに適用される以下のCSS：

img.stretch { 
left: 0px; 
position: absolute; 
top: 0px; 
width: 100%; 
z-index: 0; 
}

これは、1440×900の解像度で私の17.1' ラップトップ上で正常に動作していますしかし、他の画面解像度では正しく動作しないことに気付きました。何が起こるのかは、背景が底に伸びるのではなく、ページの真下または真ん中にまで伸びるということです。

今、私は多くのCSSを変更しようとしましたが、完全に伸ばすことはできません。

何か助けていただければ幸いです。

あなたがテストしたいURLは、http://bit.ly/eOEzXJです。必要であれば、私はこれらの事のあらゆる行うことができます

：任意の次元

にPhotoshopで

2010-12-07 Evert

に、HTMLのimgタグの高さと幅を設定したい場合があります。あなたが要素の背景を伸ばすようにしようとしていたようですが、これはCSSではできません。 – meagar

イメージを伸ばすべきではありません。繰り返したい場合はバックグラウンドリピートを使用してください。 – kobe

@gov、あなたのコメントのおかげで！しかし、リンクを見れば、画像を繰り返すのではなく、画像をページに合わせて伸ばすことができます。 – Evert

これをやってみ見ることができないよう：

body { 
    height: 100%; 
} 

img.stretch { 
    // your stuff 
    height: 100% 
}

を私はあなたにもラッパーCSSクラスを持って気づきました。ここでは正しい軌道に乗って

#wrapper { 
    height: 100%; 
}

2010-12-07 16:39:08

説明のために、元のアスペクト比を維持するために画像の高さが拡大されています。これは長い文書では十分ではありません。イメージを底に向かって平坦な色にフェードさせることを検討するかもしれません。 – meagar

答えをくれてありがとう:-)これは、残念なことに、問題を解決するようではありません.. – Evert

チャックさんが、しかし、あなたにも

html { 
    height: 100%; 
}

を追加する必要があります：あなたはまた、これを追加する必要があると思います。

2010-12-07 16:41:12

あなただけの100％あなたはこれを言い替えるする場合があります

<img src="images/night_sky7.jpg" class="stretch" width="100%" height="100%"/>

2010-12-07 21:03:33 Kobby

答えて