覆盖手机的背景尺寸

Question

我的网站有问题。 该图片在桌面上看起来不错，但在我的手机上却因为放大而显得很糟糕。

我该如何解决？ 它不能与

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>

Answer 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; 
    }
}

Answer 2

也许您可以将其更改为背景大小：当屏幕宽度小于767px时包含

Answer 3

使用背景大小：100％100％； 检查代码段视图。

 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>