1

I really don't know why this is happening, I guess I'm tired, but the question is that the "background-size" doesn't work on my mobile devices, just when I tried to simulate on the browsers that I used in my PC.

Take a look:

PC looks like these: Image

Mobile... Image

Ah! The codes:

@media screen and (max-width: 888px) {
  body{background: url(../img/bgm.jpg) fixed no-repeat; background-size: cover;}
}

Thanks

brcebn
  • 1,571
  • 1
  • 23
  • 46
ledlemos
  • 11
  • 3

2 Answers2

0

Give this a whirl, just add it in your /head/

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

credit: https://www.w3schools.com/css/css_rwd_viewport.asp

If this doesn't fix it, it could be your background-position size if you have a div with a background image try contain as opposed to cover on the mobile version, or just upload the image that has the appropriate size, for ex: if the header is 300px wide by 150px height just resize the image to that

bignate132
  • 23
  • 5
  • That's the first line of my script! hahaha The size of my background was 919x1280, then I changed to the full image (1720 x 2400) to see what happens, but stays exactly the same thing... – ledlemos Nov 03 '17 at 22:24
0

Finally worked!

After a deep search, I found this: background: fixed no repeat not working on mobile

body:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url(photos/2452.jpg) no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
ledlemos
  • 11
  • 3