CSS background images resizing incorrectly on iPad and iPhone.

Question

My site's background image is resizing nicely in Chrome and Safari using background-size: cover, but when I go to test my website on an ipad or iphone, the CSS background image is really zoomed in and looks horrible. I've read lots of other questions on here relating to this and none have solved my problem.

HTML

<div class="background"> 

</div><!--background-->

.background has no container and is 100% width of the screen.

CSS

.background {
    height:600px;
    width:100%;
    position:relative;
    background: url(css/img/strand.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@AndrewChappell I think you should take a look at [**this**](http://stackoverflow.com/questions/18429620/css-background-size-cover-replacement-for-mobile-safari). — Ruddy, Mar 03 '14 at 08:21
I'm having the same problem. Adroid is rendering the background just fine. — Etienne Dupuis, Apr 04 '14 at 14:45

score 59 · Accepted Answer · answered Apr 04 '14 at 15:02

59

I had the same issue, I used SCROLL instead of FIXED.

background-attachment:scroll;

answered Apr 04 '14 at 15:02

Etienne Dupuis

13,548
6
47
58

2

After working on this problem for hours, this problem fixed my issue in seconds. Thank-you! – Tim Dearborn Feb 25 '17 at 17:39
1

Thank you very much. Can anyone explain why this works? Is it treating the barrel roll as a scroll? – JacobLett Mar 07 '17 at 15:01
works perfectly fine, I use fixed in desktop and scroll in mobile devices. – Ethan.R Dec 29 '18 at 15:46
Two days trying to fix this, and this was the answer! Thanks! – SysHex Feb 05 '19 at 10:52

score 0 · Answer 2 · edited May 23 '17 at 11:33

Apparently, the iPad's Safari is downsampling images above the 1024px threshold. I had tried using scroll instead of fixed but that wasn't successful. Other tricks didn't work for me either.

I solved this by splitting my originally-too-large 1600×1600 image into two images. Because of that, I was able to use two 1024px sized images and achieved an even better readability than before.

Maybe a workaround like that would work for you, too.

CSS background images resizing incorrectly on iPad and iPhone.

2 Answers2

Linked

Related