CODEWITHSUNDEEP
htmlcssbackgroundresponsive
nobleBean
nobleBean

Reputation: 25

Cover background-size on mobile

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>

Upvotes: 0

Views: 2777

Answers (3)

vlk
vlk

Reputation: 1454

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

Upvotes: 1

Baezid Mostafa
Baezid Mostafa

Reputation: 2728

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>

Upvotes: 0

user7253564
user7253564

Reputation:

Maybe you could change it to background-size: contain when the screen width is smaller than 767px

Upvotes: 0

Related Questions