Question

我在我的网站上设置了一个固定的背景图像，它在台式机和桌面上的所有浏览器上都很好看，但在Android手机上它会重复并重复它。我无法找到解决这个问题的方法。这是代码..如果有人修复了保持背景图像修复而不重复Android Chrome请告诉我..谢谢。请排除任何无济于事的评论。

CSS：

html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    width: 100%;
    background-image: url("images/320htmlbackground.png");
    background-attachment: fixed;       
}

也尝试了这个但是没有用.........

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

Answer 1

试试这个：

html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0;
    width: 100%;
    background-image: url("images/320htmlbackground.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;       
}

Answer 2

我遇到了类似的问题，但我不确定它是否属于同一个问题。我的问题是背景图像并没有像你对固定图像所期望的那样停留在同一个地方。即当我向上和向下滚动随页面移动的背景图像时。

原来我在body标签上设置了背景。它在所有浏览器上运行良好，除了在我的手机上。我将背景更改为html标记，并且在滚动时它保持不变。

Answer 3

对我来说，这很好：

body{
    position: relative;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    @media screen and (max-width: 767px) {
        height: 100%;
        overflow-y: auto;
    }
}

CSS设置固定在Android手机上的背景图像？

3 个答案: