0

所以我试图在我的页面左下角使用背景图像，但我希望它修复并使用浏览器窗口调整大小。

我接近达到这个目标的唯一方法是使用'背景尺寸：100％'但是，这会使图像太高。所以我不确定用什么来让它真正适合。

有什么建议么？

这是我目前的代码...

body {
background-color:#000000;
background-image:url(Image.png);
background-position: 0% 100%;
background-attachment:fixed;
background-repeat:no-repeat;
    background-size: 100%;

}

4

1 回答 1

1

嗯，background-size需要不止一个值。你可以尝试这样的事情：

background-size: auto 100%;

但是，为简单起见，首先尝试：

background-size: cover;

这将使背景的宽度自动调整为100%高度的纵横比。这保证了背景图像永远不会小于或大于高度，但宽度会随着浏览器的纵横比而变化。

附录

另请注意，background-size并非所有浏览器都支持。如果对 Internet Explorer 的支持对您来说是个问题，那么我强烈建议您使用 Javascript 后备。我还强烈建议阅读始终可爱的 Chris Coyier 关于“完美整页背景图像”的文章。它讨论了各种后备方案！

于 2012-08-28T03:06:29.367 回答