Shopify retina display image sprite

Question

I have a shopify website with a customised theme.

The images are in a sprite named "sprite_images.png". I'm looking at some sites about applying retina sprites to retina displays.

http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/ http://alexthorpe.com/uncategorized/css-sprites-for-retina-display-devices/683/

I've created a sprite and called it "sprite_imagesx2.png". The css for this isnt working. Here's an example.

h1.title{
    background:url({{ 'sprite_images.png' | asset_url }}) no-repeat 0 0;
    width:108px;
    height:12px;
    margin:0 auto 10px;
    overflow:hidden;
    display:block;
    text-indent:-999px;
}


@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 240dpi) {
    h1.title{
        background-image:url({{ 'sprite_imagesx2.png' | asset_url }}) 
    background-size:108px 12px;
    }
}

It's not working at all and I have been wondering if the x2 sprite needs to be called "sprite_images@x2" so I'm trying this atm and the image can't be uploaded with a special character.

I don't know if this is what's wrong but if it is how can I upload the image with the @ to shopify?

lax lax · Accepted Answer · 2013-01-24T12:40:16

Try the following

h1.title{
    background:url({{ 'sprite_images.png' | asset_url }}) no-repeat 0 0;
    width:108px;
    height:12px;
    text-indent:-999px;
}

h1.title{
    background-position: 0 0 !important; <-your position here
}

Shopify retina display image sprite

1 Answers