CODEWITHSUNDEEP
htmlcssbackground-size
Kadzhaev Marat
Kadzhaev Marat

Reputation: 1317

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

Upvotes: 2

Views: 10538

Answers (4)

user3161153
user3161153

Reputation: 41

This is the best solution

body {
    background: url(../images/background.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-attachment: fixed;
    background-color: #fff;
    -webkit-background-size: calc(100vw) calc(100vh);
    -moz-background-size: calc(100vw) calc(100vh);
    -o-background-size: calc(100vw) calc(100vh);
    background-size: calc(100vw) calc(100vh);
    }

Upvotes: 0

Paulo Roberto
Paulo Roberto

Reputation: 1

Try use <meta name="viewport" content="width=device-width, initial-scale=1">

Upvotes: 0

L&#225;ďa Durch&#225;nek
L&#225;ďa Durch&#225;nek

Reputation: 1219

How about?

background-image: url("/resources/img/background2.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;

Upvotes: 1

Metabolic
Metabolic

Reputation: 2914

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;

Upvotes: 3

Related Questions