CODEWITHSUNDEEP
htmlioscss
chap
chap

Reputation: 1869

CSS background images resizing incorrectly on iPad and iPhone.

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;
}

Upvotes: 24

Views: 35200

Answers (2)

WoodrowShigeru
WoodrowShigeru

Reputation: 1595

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.

Upvotes: 0

Etienne Dupuis
Etienne Dupuis

Reputation: 13786

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

background-attachment:scroll;

Upvotes: 59

Related Questions