4

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.

Jesse Atkinson
  • 10,586
  • 13
  • 42
  • 45
  • which element are you talking about? Can you paste the appropriate html and css here for us to see otherwise we have no clue which image you are referring to. Im guessing you mean the header background though? http://ourcityourstory.com/dev/img/header-bg.jpg – Jon Taylor Jul 22 '12 at 18:42
  • The backgrounds of the About and Contact section. The background of the Header section is actually an absolutely positioned image. – Jesse Atkinson Jul 22 '12 at 18:46
  • I seem to be having this same issue with using background-size: cover on my site (http://jag.is). It works just fine in desktop browsers at all resolutions, but on iPhone Safari it is a mess. (Referring to the background in the intro section, with the headline "Pixel Perfect Design & Code") – Joel Glovier Sep 15 '12 at 16:21

2 Answers2

13

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.

Joel Glovier
  • 7,469
  • 9
  • 51
  • 86
3

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.

khollenbeck
  • 16,028
  • 18
  • 66
  • 101
  • I'm already doing all of this. I'm talking specifically about the attribute background-size: cover. It's screwing it up, but I need it to cover. – Jesse Atkinson Jul 22 '12 at 20:09