Search code examples
htmlcssbackground-size

Background size for mobile devices

I'm trying to make a background image for mobile devices like:

body {
  background: url("/resources/img/background2.jpg") no-repeat fixed;
  -webkit-background-size: 100%;
  -moz-background-size: 100%;
  -o-background-size: 100%;
  background-size: 100% 100%;
}

In Chrome developers' tools it looks nice, but on a real device (with a smaller screen size) it does not. Why is this, and how I can solve this problem?

Snapshots:

enter image description here

enter image description here

Solution

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