Grow your CSS skills. Land your dream job.

Retina media query not loading background image

  • # November 28, 2012 at 8:54 pm

    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
    # November 28, 2012 at 10:50 pm

    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

    # November 29, 2012 at 3:00 pm

    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%;
    }
    }

    # November 29, 2012 at 3:35 pm

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".