Background-size: the cover looks uneven on the retina screen

Question

On the website I'm working on can be seen here . If you're viewing the About or Contact section of an iPad 3 or iPhone 4, the background looks crazy.

I have background-size to cover , so when a user resizes it, it scales accordingly, however on iPad or iPhone it looks awful.

Any help or troubleshooting tips for @media only screen and (min-device-pixel-ratio: 2) devices?

Thanks.

Answer 1

This is because you are using background-attachment:fixed - for some reason this when used with background-size: cover in iOS causes this behavior. (I had the same error in http://jag.is and just resolved it today).

So, if you add the following, it should be allowed:

 /* 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 also applies to iOS because it does not recognize the cover property for background-size

In this article I have found my solutions.

Great BTW website design.

Answer 2

When creating high-resolution images for iOS, you need to use a high-resolution multimedia query, which, as you see it, is already being executed. Also your image should be twice as large, and then reduced to 50% for a 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 does not, make sure you have the appropriate meta tags and double check your code.