在手机上覆盖背景大小答案

【问题标题】：Cover background-size on mobile在手机上覆盖背景大小
【发布时间】：2017-04-23 18:22:41
【问题描述】：

我的网站有问题。图片在桌面上看起来很棒，但在我的手机上看起来很糟糕，因为它放大了。

我该如何解决这个问题？它不适用于

background-size:cover;

带背景的div有两个类

.content{
    color: white; 
    font-family: "Another Typewriter"; 
    width:100%; height:1000px;  
    font-size: 300%; 
    padding-left: 15%; 
    padding-right: 15%; 
    padding-top: 10%; 
    text-align: center; 
    background-size: cover;
}

.parallax{
    height: 100%; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover;
}
#xyz{background-image: url(URLtoimage);}

Div 容器：

    <div id="xyz" class="parallax content">
    <legend class="text-center content-headline">XYZ</legend>
Some text
    </div>

【问题讨论】：

你有更多的代码，比如你正在使用的 HTML 和 CSS 吗？？？
您是否添加了viewport meta tag？例如：<meta name="viewport" content="width=device-width, initial-scale=1.0">

标签： html css background responsive

【解决方案1】：

我如何假设您正在使用 background-attachment: fixed; ，它无法在许多移动浏览器上运行，您必须使用媒体查询在小屏幕滚动上更改它。

.parallax{
   height: 100%; 
   background-attachment: fixed; 
   background-position: center; 
   background-repeat: no-repeat; 
   background-size: cover;
}

@media screen and (max-width: 600px) {
   .parallax {
        background-attachment: scroll; 
    }
}

【讨论】：

感谢您的帮助，但它不起作用。我编辑了我的帖子并添加了 div 具有的类。

【解决方案2】：

也许你可以把它改成 background-size: 当屏幕宽度小于 767px 时包含

【讨论】：

使用@media 显示不同的图像和较小的屏幕宽度

【解决方案3】：

使用背景尺寸：100% 100%；检查 sn-p 视图。

body{
margin:0;
}
.bg-img {
  background: url('http://www.planwallpaper.com/static/images/6942095-abstract-background-wallpaper.jpg') no-repeat center;
  background-size: 100% 100%;
  min-height: 100vh;
  width: 100%;
}

<div class="bg-img">

</div>

【讨论】：

那么您还有其他问题。如果可能，添加 html 部分和背景图像。因为你的内容和视差类没有任何背景源。
好的，我添加了 html