Search code examples
ioscssgoogle-chromebackground-imageretina-display

Chrome iOS not using retina background-image

I'm on an iPhone 5... I started updating my website, to use retina images. Everything works perfectly in Safari. For some reason, my background-image for the body isn't using it, and its super blurry. Any ideas? Is this a bug? This is what I have for the media query for retina displays:

body {
    background: 
        url(../images/logo.png) no-repeat,
        url(style/images/dark/bg5.jpg) 50% 0 no-repeat, 
        url(style/images/dark/bg5_repeater.png) repeat bottom;
    background-attachment: fixed;
    background-color:#09273e;
    color:#e4e4e4;
    background-position: 15px 10px, top, bottom;
}

@media 
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {

    body, #header {
        background: url(../images/dark/[email protected]) repeat;
        background-size: 70px 70px;
    }

}

Here is the link to the file and code line, on my bitbucket: http://bit.ly/Sxevfg

Here are some screenshots too between Safari and Chrome on iOS 7.1.1.

Thanks so much

Chrome background-image

Safari background-image

Solution

  • Could be that the image was not saved as a progressive image. When saved as progressive, it fixes the issue.