在手机上覆盖背景大小

我的网站有问题。这张照片在桌面上看起来不错，但在我的手机上看起来很糟糕，因为它放大了。在手机上覆盖背景大小

我该如何解决这个问题？它鸵鸟政策工作，

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>

来源

2017-04-23 theunbreakable21

你有更多的代码，如HTML和CSS您使用??? –

您是否包含[视口元标记]（https://www.w3schools.com/css/css_rwd_viewport.asp）？例如：' –

我是怎样假设你是使用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; 
    } 
}

来源

2017-04-23 18:30:26 vlk

感谢您的帮助，但它不是加工。我编辑我的文章，并添加了div的类。 – theunbreakable21

您是否尝试过使用前缀？ – vlk

是的，但它也不能工作 – theunbreakable21

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

来源

2017-04-23 18:25:55

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

use background-size：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>

来源

2017-04-23 18:42:07

感谢您的帮助，但它不起作用。 – theunbreakable21

那么你有一些其他问题。如果可能的话，添加html部分和背景图片。因为你的内容和视差类没有任何背景源。 –

好吧，我添加了html – theunbreakable21

在手机上覆盖背景大小

回答

相关问题