I have a problem with my website. The picture looks great on the desktop but on my phone it looks terrible because its zoomed in.
How can I solve this? It don´t work with
background-size:cover;
The div with the background have two classes
.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 Container:
<div id="xyz" class="parallax content">
<legend class="text-center content-headline">XYZ</legend>
Some text
</div>
How I've assumed you're using background-attachment: fixed;
, it can't work on many mobile browser you must use media query to change it on scroll for little screen.
.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;
}
}
也许您可以将其更改为背景大小:当屏幕宽度小于767px时包含
use background-size:100% 100%; Check the snippet view.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.