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:

-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.

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

Leave a reply