拉伸图像作为背景 [英] Stretch image as background

问题描述

我需要像伸展的页面的背景。如果页面将无法很好地扩展不要紧，什么都的屏幕分辨率可能是，整个图像必须显示在屏幕上。我找到了一些解决方案，在谷歌，但既没有在Firefox2或IE6或两者的工作，我需要这两个了。
我讨厌当人们不他们的软件升级，但我仍然看到谷歌分析数据这些浏览器打的网页，尤其是IE6。

I need image to stretch as background of page. It doesn't matter if page will not scale well, what ever screen resolution may be, whole image has to be visible on screen. I found some solutions on Google, but it either didn't work in Firefox2 or IE6 or both, and I need those two too. I hate when people don't upgrade their software, but I'm still see these browsers in google analytics data hitting web page, especially IE6.

有良好的跨浏览器的解决方案呢？

Is there good cross browser solution for this?

推荐答案

您可以使用一个良好的老式img标签，没有高度和宽度属性。在你的CSS，具有低的z-index，设置高度和宽度绝对定位为100％。

You could use a good old fashioned img tag, without height and width attributes. In your CSS, position it absolutely with a low z-index, set height and width to "100%".

把一切都在页面上的其他人在另一个div具有较高的z-index

Put everything else on the page in another div with a higher z-index

这样的：

<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），但它的工作原理。

It's not exactly a "background image" (and probably not W3C standards-compliant CSS) but it works.

这篇关于拉伸图像作为背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！