Background Size for Mobile Devices

Background size for mobile devices

You want a responsive background image which can get scaled down on smartphones. Use this:

background-image:url('/resources/img/background2.jpg');
-webkit-background-size: 100%; 
-moz-background-size: 100%; 
-o-background-size: 100%; 
background-size: 100%; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

How can I scale background image for mobile using CSS?

Use the units VH for viewport height and VW for viewport width.

A setting I often use for example is this one:

width: 100vw;
height: 100vh;
background: url(../images/hero.jpg);
background-size: cover;
background-position: center, center;

You could also use for example: width: calc(100vw - 100px); to come up with the perfect scale for what you're trying to achieve.

Full Height Background Image using CSS on Mobile devices

Removing height:100% and keeping background-size: cover; will solve the current issue.

background-size: cover does not cover mobile screen

After hours of trying different things, adding min-height: 100%; to the bottom of html under the { background:... } worked for me.

Background image size on mobile devices

Adding this line of CSS fixed my issue:

@media (max-width: 768px) {
    .main-jumbo {
      background-attachment: scroll;
  }
}

Apparently background-attachment: scroll works much better on mobile than fixed.

Cover background-size on mobile

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

---

Related Topics