Forums

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/background@2x.png') 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/background@2x.png') repeat;
  background-size: 50%;
}
}

mikes02

Ended up using the new method Chris posted about 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/background@2X.png') repeat;
  background-size: 100%;
}
}

treehouse : what would you like to learn today?

Forums

Retina media query not loading background image