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%（尽管这有点 hacky）或将图像的背景设置为body图像。然后这将在屏幕底部显示背景图像（尽管主体不是全高 - 令人困惑吗？）。

但是，您的 HTML 很难检查，因为（我假设）您用来创建它的软件添加的divs 比我想象的要多！

编辑：仔细检查后，您似乎需要设置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%; }