Skip to content

Instantly share code, notes, and snippets.

@pfulton

pfulton/hd-images.scss

Forked from robtarr/mixins.scss
Created August 20, 2012 18:33
Download ZIP

Revisions

  1. pfulton revised this gist Sep 13, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion hd-images.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -8,6 +8,6 @@
    // the HD version - use regular image path to prevent downloading non-hd version, too
    @media (-webkit-min-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),(min-device-pixel-ratio: 1.5) {
    background-image: image-url($hdPath);
    background-size: image-width($hdPath) image-height($hdPath);
    background-size: image-width($defaultPath) image-height($defaultPath);
    }
    }
  2. pfulton revised this gist Sep 13, 2012. 2 changed files with 13 additions and 13 deletions.
    13 changes: 13 additions & 0 deletions hd-images.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    @mixin hd($defaultPath, $hdPath) {
    // the non-hd image - use data URI for this
    background-image: inline-image($defaultPath);
    // the IE fall-back for non-data URI support
    .lt-ie9 & {
    background-image: image-url($defaultPath);
    }
    // the HD version - use regular image path to prevent downloading non-hd version, too
    @media (-webkit-min-device-pixel-ratio: 1.5),(-o-min-device-pixel-ratio: 3/2),(min-device-pixel-ratio: 1.5) {
    background-image: image-url($hdPath);
    background-size: image-width($hdPath) image-height($hdPath);
    }
    }
    13 changes: 0 additions & 13 deletions mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,13 +0,0 @@
    @mixin retina($defaultPath, $retinaPath, $minSize) {

    @media (min-width: $minSize) {
    background-image: url($defaultPath);

    @media (-webkit-min-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (min-device-pixel-ratio: 1.5) {
    background-image: url($retinaPath);
    background-size: image-width($defaultPath) image-height($defaultPath);
    }
    }
    }
  3. pfulton revised this gist Aug 20, 2012. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,7 @@
    (-o-min-device-pixel-ratio: 3/2),
    (min-device-pixel-ratio: 1.5) {
    background-image: url($retinaPath);
    background-size: image-width($retinaPath) image-height($retinaPath);
    background-size: image-width($defaultPath) image-height($defaultPath);
    }
    }
    }
  4. @robtarr robtarr created this gist Aug 20, 2012.
    13 changes: 13 additions & 0 deletions mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,13 @@
    @mixin retina($defaultPath, $retinaPath, $minSize) {

    @media (min-width: $minSize) {
    background-image: url($defaultPath);

    @media (-webkit-min-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (min-device-pixel-ratio: 1.5) {
    background-image: url($retinaPath);
    background-size: image-width($retinaPath) image-height($retinaPath);
    }
    }
    }