Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Helper mixins to automatically add CSS for double dimension images
branch: master

Merge pull request #5 from mlunoe/patch-1

Added the missing `background-size` dependency.
latest commit abde307d92
@joelambert authored
Failed to load latest commit information.
lib Added MIT licence to files
stylesheets Update _retina.scss
README.markdown Updated the docs


Retina graphic helper for Compass

This is a quick helper function to make it easier to maintain regular and retina images in web sites/apps.

How to use

It works on a similar principle to how XCode manages images for iOS development. If you have an image called icon.png, first add another image with twice the height and width to the same directory and call it icon@2x.png.

Next use the helper mixin provided by this extension:

@include background-image-retina('icon.png');

At its simplest this will generate:

background-image: url('icon.png?1323184535');

But if you also have the @2x image it will generate the require CSS (and a wrapping media query) to provide support for the double size graphics as well:

background-size: 50% auto;
background-image: url('icon@2x.png?1323184535');

There is also a second helper mixin to inline the images instead of link to them:

@include inline-background-image-retina('icon.png');

Both functions first check for the existence of the @2x graphics and won't fall over if they don't exist, it just won't output the retina CSS.


  1. Move the folder containing this README into your compass directory (rename it to retina)

  2. Add the following to your config.rb

    retina_ext = File.join(File.dirname(__FILE__), 'retina')
    require File.join(retina_ext, 'lib', 'sass_extensions.rb')
    add_import_path File.join(retina_ext, 'stylesheets')
  3. Import the mixins into your stylesheet

    @import "retina";


Code is Copyright © 2012 Joe Lambert and is licensed under the terms of the MIT License.

Something went wrong with that request. Please try again.