使用'background-size: 100%‘

Question

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

我唯一接近这个目标的方法是使用“背景尺寸:100%”，然而，这会使图像变得太高。所以我不确定该用什么来让它更合适。

有什么建议吗？

这是我目前的代码..。

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

}

Answer 1

嗯，background-size比just one value需要更多的东西。您可以尝试如下所示：

background-size: auto 100%;

但是，为了简单起见，先试一下：

background-size: cover;

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

附录

还要注意，并不是所有的浏览器都支持background-size。如果对Internet Explorer的支持是一个问题，那么我强烈建议使用Javascript后备方案。我也非常推荐阅读always可爱的Chris Coyier在 "Perfect Full Page Background Image"上的文章。它讨论了所有类型的后备！