2009-07-11 7 views
2

ページの背景として伸ばしたい画像が必要です。ページが拡大しないかどうか、画面の解像度がどうなっても画面全体に画像が表示されるかどうかは関係ありません。私はGoogleでいくつかのソリューションを見つけましたが、Firefox2やIE6、あるいはその両方では動作しませんでした。 私は人々がソフトウェアをアップグレードしないときに私は嫌いだが、私はまだGoogle AnalyticsのデータのWebページ、特にIE6を打つこれらのブラウザが表示されます。画像を背景として伸ばす

良いクロスブラウザのソリューションはありますか?

答えて

1

それはしかし、それはCSS3で可能で、CSS1やCSS2では不可能である。requiem4adream.wordpress.com/2006/09/29/css-stretch-background-image/

しかし、これは使用できませんIE6。

代替背景リピートを使用して、またはこのサイトは(私はそれが動作するかどうか確認haventは)働くかもしれない何かを持っていることになります。webdesign.about.com/od/css3/f/blfaqbgsize.htm

私はブラウザをアップグレードしていないユーザーが何を意味するのかを知っていますが、IE5、またはIE4のどの時点でコーディングを停止しますか?

幸運、

マット

1

良い代替は、パターンや固体の色にフェードアウトし、「静止画像」を用いることであろう。そうすれば、あなたはまだあなたの背景イメージ(しかしあなたがそれを望む)とスケーラビリティを得ることができます。

CSS3では、background-size:100%を使用できます。

Firefox 3.5ではいくつかのCSS3プロパティがサポートされていますが、まだサポートされていないと思います。

7

高さと幅の属性がなくても、古き良きimgタグを使用できます。あなたのCSSでは、Z値が低く、高さと幅を "100%"に設定してください。このように高いZインデックス

を持つ別のdiv内のページ上の他のすべてを入れて

<style type="text/css"> 
#stretchy { 
    postion: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    z-index: 0; 
} 
#everything_else { 
    position: relative; 
    top: 0; 
    left: 0; 
    z-index: 10; 
} 
</style> 

... 

<img src="/images/myimage.jpg" id="stretchy" /> 

<div id="everything_else"> 
    ... 
</div> 

は、例えばhttp://axoplasm.com/lost.htmlを参照してください。

「背景画像」(W3C標準に準拠したCSSではないかもしれません)と同じですが、機能します。

+2

+1 for id = "stretchy" – cjk

3

私はこの質問をハイジャックしたくないが、あなたはこのコードを持っていた場合:

background-image: url('images/background.gif'); 
background-size: 100%; 

を。これは、現在のすべてのブラウザ(IE、FF、GC、SF、OP)不快しばらく画像を繰り返し、 z-index深度メソッド(私は複雑なフォアグラウンドを持つ)とは異なり、すべてのブラウザで機能します。

しかし、ブラウザが突然bgサイズのCSS3をサポートするようになった場合、CSS3仕様で何が起こるべきかが示されますか?それはイメージを伸ばすべきか、それはいつも何をやり直したのでしょうか?

関連する問題