Question

我有一个巨大的背景图像，我需要100％100％的比例。但我的问题是，如果网页的浏览器高度为150％（因此浏览器为1000x1000，我的网站为1000x1500），当您向下滚动以查看网站的其余部分时，背景重复并且不会缩小

我的css是

html,body { width: 100%; height 100%; }
body { background: url(blah) no-repeat; background-size: 100% 100%; }

我知道如何解决这个问题？

Answer 1

这是关于该主题的一个很好的资源。

http://css-tricks.com/perfect-full-page-background-image/

希望它有所帮助。

Answer 2

与CSS-Tricks文章解释一样，您可以将CSS更改为：

html { 
    background: url(images/background.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这将确保您的背景图像覆盖整个页面，但仅在CSS3中受支持。如上所述，您需要为每个主要浏览器包含特定代码。

或者，尝试使用：

height: 100%;

或

width: 100%

取决于与页面相关的图像大小，但这应该让图像调整到页面的正确高度/宽度，同时保持宽高比。

Answer 3

尝试将背景图片应用于html。

Answer 4

如果宽度设置为100％，则设置高度为100％。你可以用javascript解决这个问题。

背景大小问题？

4 个答案: