1

I wanted to give my web page background on which all elements will be so I added this to my CSS file: 

body {
    background: url("../img/pic.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }

And it works as expected on web browsers. The background image is fixed in position and while scrolling, only the elements in body tag moves but not the picture.

BUT that doesn't work for mobile phones...When I open it on my mobile phone that same background picture is shown but zoomed like few times, it won't resize nicely as it looks like when I shrink my web browser on my PC to see a preview on smaller screens.

I tried few pictures, bigger, smaller, different ratios, but nothing helped. I even added 

@media screen and (max-width: 479px) {
body {
background: url("../img/pic.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;}}

so I could have a special picture to be shown on mobile devices but no matter which picture I select/upload it always distorts it with that zoom.

I am using bootstrap and still learning. I have some stock files from some templates which I used but searching through them hoping to find somebody CSS which overwrites my own body CSS and zooms on the image but couldn't find any. heh

Ali Sheikhpour
  • 10,475
  • 5
  • 41
  • 82
Heisenburg
  • 33
  • 4

2 Answers2

0

On phone fixed background work bad on lot of OS. So try this :

background-attachment: initial;

Or use body:before to set the background. More solutions here : background: fixed no repeat not working on mobile

Netenvie
  • 21
  • 4
0

Try this solution:

@media(max-width: 767px)  {
  body {
    background-size: 100%;
    background-attachment: initial;
    background-position: center;
    background-repeat: no-repeat;
  }
}

Your problem is propably in declaration of @media tag. It should be @media(max-width: 767px).

WebCoder
  • 62
  • 10