CODEWITHSUNDEEP
cssgoogle-chromeresponsive-design
Karol Selak
Karol Selak

Reputation: 4804

Background image zoomed too much on mobile

I have strange problem with my RWD page. I have a background image with following styles:

#background-image {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  position: absolute;
  z-index: -1;
  background-image: url('../landing.jpeg');
  background-attachment: fixed;
  background-size: cover;
  background-position: 85% 50%;
  background-repeat: no-repeat;
}

When I'm in mobile mode in Chrome DevTools (and FF too), everything looks ok:

enter image description here

But on real mobile browser this background becomes too large:

enter image description here

What can be the reason? My mobile browser is Chrome 63 on Android and my desktop browser is Chrome 59 on Ubuntu.

Upvotes: 0

Views: 3042

Answers (2)

Bartek Dybowski
Bartek Dybowski

Reputation: 56

It's because the background-attachment: fixed setting is not working on mobile browsers...

Try removing background-attachment property and change the position prop to fixed, like below:

#background-image {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  position: fixed;
  z-index: -1;
  background-image: url('../landing.jpeg');
  background-size: cover;
  background-position: 85% 50%;
  background-repeat: no-repeat;
}

Hope this will help...

Upvotes: 4

Julian Chabrillon
Julian Chabrillon

Reputation: 31

Try to add inside HEAD:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Upvotes: -2

Related Questions