background-size: cover looks pixelated on retina display

Question

The website I'm working on can be seen here. If you check out the 'About' or 'Contact' section on iPad 3 or iPhone 4 the background looks all crazy pixelated.

I've got the background-size set to cover so that when the user resizes it it scales appropriately, however on iPad or iPhone it looks terrible.

Any help or tips on how to fix this for devices @media only screen and (min-device-pixel-ratio: 2)?

Thank you.

Answer 1

It's because you are using background-attachment:fixed - for whatever reason this when used with background-size: cover on iOS causes this behavior. (I had this same bug at http://jag.is and just resolved it today).

So if you add the following it should be resolved:

/* for background-size:cover replacement on iOS devices */
@media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) {
    header {
      -webkit-background-size: auto 150%;
      background-attachment: scroll;
    }
}
@media only screen and (orientation: landscape) and (device-width: 320px), (device-width: 768px) {

    header {
      -webkit-background-size: 150% auto;
      background-attachment: scroll;
    }
}

The -webkit-background-size property is for iOS as well because it doesn't recognize the cover property for background-size

Here's the article I found my solutions from.

Lovely site design BTW.

Answer 2

When creating high resolution images for IOS you need to use the high res media query, which you seem to already be doing. Also your image should be twice as large and then shrunk down to 50% for high retina.

@media all and (-webkit-min-device-pixel-ratio : 1.5) {
            #header { background: url(headerRatio2.png); background-size: 50%; }
        }

This method should work.. If it doesn't then make sure you have appropriate meta tags, and double check your code.