Background Image Not Resizing on Mobile Viewport Size

[toad78]

I’m using a background image behind a series of containers. For example (look at New to Positive Pressure):

#wysiwyg_widgets_widget-8 {
background-attachment: fixed;
    background-image: url("img/tempest-tech-poistive-pressure-700.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;}

I would figure that the background image would have resized as the viewport changes, but it’s looking bloated and pixelated on the Apple devices (iPad and iPhone). It looks normal on my Samsung phone and tablet devices.

Anyone else seeing this and know of a possible solution?

[chrisofarabia]

This is how it’s looking on my iPhone5 running iOS 9.2.1 via 4G - does that look right?

[toad78]

That’s how it looks in the iPhone’s I’m seeing, which isn’t the way it SHOULD display. On a Samsung phone, you can actually see the background image displaying behind the gray background. So my concern is why is the Apple devices not displaying the background image, but the Samsung’s are and is there an error in my code?

[PaulOB]

IOS doesn’t support background-attachment fixed but will generally scroll with the element as usual. However when you add background-size cover as well it seems to break the whole thing. We had a similar question here.

You can use a media query on device width and detect ipad and iphone and offer background-attachment scroll instead.

If it were only one fixed background you needed you could use a position:fixed div instead with a normal background image but that approach won’t work for multiple images.

I am away this week and can’t test but I note my old example with cover works on the iphone but scrolls instead of being fixed. I think it may work because the div has a set height. I need to test more when I get back.

[toad78]

Thanks for the URL. I did some research on my own after your comment and found a similar answer to yours here: http://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7

[toad78]

For iOS devices (phone/tablet) I just forced the background attachments to scroll and the background image shows up just fine. Too bad iOS doesn’t cooperate with standard CSS like that. Maybe next year.

Thank you for your help, PaulOB.