Question

下午堆栈溢出，

我的问题出在我的网站here

上

我使用模块作为背景图片，在桌面计算机和iPad上运行良好，当移动用户浏览网站时，最大值为4000px的背景图像会停止并显示白色背景。我已经绑定@media修复但没有运气。我找到的唯一修复覆盖了内容区域，删除了顶部的滴水效果。

再次感谢，史蒂文

Answer 1

解决方案： 1-在移动情况下（媒体查询）将background:#000;提供给body

body {
    background: url('http://www.vapescotts.co.uk/image/catalog/Background_Img/background_black.png') no-repeat center top #000 !important;
}

2 - 在移动情况下向媒体查询background-size: cover !important;提供body

body {
    background: url('http://www.vapescotts.co.uk/image/catalog/Background_Img/background_black.png') no-repeat center top #000 !important;
background-size: cover !important;
}

Answer 2

你可以给出

#content { background-color:#000; padding-bottom:30px; }

并删除

footer { margin-top:30px; }

产生与图像覆盖全部相同的视觉效果。

Answer 3

你的背景只是没有响应，这就是问题。我建议尝试修复你的背景图像

background: url(http://www.vapescotts.co.uk/image/catalog/Background_Img/background_black.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

尝试将此放在您的网站上正如您所看到的那样，它可以获取图像及其响应，并且后台的所有内容都具有响应性。只需使用您的背景图像，因为它从上到下切成两半，所以要小一些

修改

您的图片为1920x4252，使其为1920x1080或类似内容。

Opencart背景图像/颜色错误

3 个答案: