Background image not scaling on mobile

Hi,

I have teh following markup:

.banner-wrapper{
  height: 100vh;
  width: 100%;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Rep._Barbara_Jordan_-_Restoration.jpg/478px-Rep._Barbara_Jordan_-_Restoration.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #ff0000;
}
 <div class="banner-wrapper">
    	<div class="banner-message container">
   		text
		</div>
</div>

The background image is fine on desktop (and scales fine to mobile size on desktop by resizing the browser), but when viewed on an actual mobile device, the image is zoomed in and not scaled.

Why would this be?

Some mobiles have a problem with the fixed attachment.
There is a workaround for it using a pseudo element with position: fixed to hold the background.
I’ll see if I can find that…

1 Like

Yes you can’t use background-attachment:fixed and background-size:cover at the same time on ios.

Here is a work-a-round.

1 Like

Thanks, but its not so much having it fixed, its having it so it scales on mobiles rather than being zoomed in.

You’ll have to show an example as I can’t think what you mean? The demo I gave works fine in ios.

I assume you have the viewport meta tag in the page?

Hi,

I think I got it to work by removing background-attachment:fixed.

That’s what we’ve been saying in every post :flushed:

4 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.