This bg-variants mixin is a responsive images solution which supports multiple screen widths and densities. It uses CSS3 multiple backgrounds and is an improvement in user experience over just specifying backgrounds since any low res background image specified later in the stack will load first. This solution doesn't play well with IE8 as it wil…

_bg-variants.scss

//-----------------------------------------------------------------------------
// Background Variants

@mixin bg-variants($filename, $path: '/online/', $extension: 'jpg') {
  background-image: url(#{$path + $filename + '.small.' + $extension});
  
  @include hidpi(1.5) {
    background-image:
      url(#{$path + $filename + '.small@2x.' + $extension}),
      url(#{$path + $filename + '.small.' + $extension});
  }
  
  @include respond-to($break-2) {
    background-image:
      url(#{$path + $filename + '.medium.' + $extension}),
      url(#{$path + $filename + '.small.' + $extension});
    
    @include hidpi(1.5) {
      background-image:
        url(#{$path + $filename + '.medium@2x.' + $extension}),
        url(#{$path + $filename + '.small.' + $extension});
    }
  }
  
  @include respond-to($break-3) {
    background-image:
      url(#{$path + $filename + '.large.' + $extension}),
      url(#{$path + $filename + '.small.' + $extension});
    
    @include hidpi(1.5) {
      background-image:
        url(#{$path + $filename + '.large@2x.' + $extension}),
        url(#{$path + $filename + '.small@2x.' + $extension});
    }
  }
  
  @include respond-to($break-4) {
    background-image:
      url(#{$path + $filename + '.huge.' + $extension}),
      url(#{$path + $filename + '.small' + $extension});
    
    @include hidpi(1.5) {
      background-image:
        url(#{$path + $filename + '.huge@2x.' + $extension}),
        url(#{$path + $filename + '.small@2x.' + $extension});
    }
  }
}

_respond-to.scss

//-----------------------------------------------------------------------------
// Respond To

@mixin respond-to($breakpoint) {
  @media only screen and (min-width: $breakpoint) { @content; }
}

app.scss

//-----------------------------------------------------------------------------
// Settings

$break-1: 480px;
$break-2: 768px;
$break-3: 1024px;
$break-4: 1440px;