Retina media query not loading background image

[mikes02]

Working on a responsive site, was testing on my friends iPhone 4 with retina and all of my other media queries are working perfectly but for some reason my retina media query is not loading the background image, here is the code:

#textured{background:url(‘images/background.png’) repeat;paddingbottom:7.0625em}

@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){
#textured
{
background: url(‘images/[email protected]’) repeat;
background-size: 50%;
}
}

[otc]

Hello Mikes02,

You havn’t included screen size for every line and that is probably the issue, like so:

only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px)

For medium screens

only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 700px)

another issue I see here is your paddingbottom should be padding-bottom

Another thing is you have min–moz, I know this a bug however you should include the proper CSS -moz-min.

Hope this helps :D

[mikes02]

The padding bottom had the – not sure why it didn’t paste. I tried updating my media query and it still isn’t loading the 2x background image, here is what I have:

#textured{background:url(‘images/background.png’) repeat;padding-bottom:7.0625em}

@media
only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and (min–moz-device-pixel-ratio: 2) and (min-width: 320px),
only screen and (-moz-min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and (-o-min-device-pixel-ratio: 2/1) and (min-width: 320px),
only screen and (min-device-pixel-ratio: 2) and (min-width: 320px),
only screen and (min-resolution: 192dpi) and (min-width: 320px),
only screen and (min-resolution: 2dppx) and (min-width: 320px){
#textured
{
background: url(‘images/[email protected]’) repeat;
background-size: 50%;
}
}

[mikes02]

Ended up using the new method [Chris posted about](https://css-tricks.com/snippets/css/retina-display-media-query/ “Retina Display Media Query”) and all is working great now:

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi) {
#textured
{
background: url(‘images/[email protected]’) repeat;
background-size: 100%;
}
}

[Author]

Posts