diff --git a/styles/mixins.scss b/styles/mixins.scss
index e39df63d..0fc2db64 100644
--- a/styles/mixins.scss
+++ b/styles/mixins.scss
@@ -26,3 +26,36 @@
        }
   }
 }
+
+@mixin hidpiImage(
+  $image,
+  $extension,
+  $width,
+  $height,
+  $position: center,
+  $repeat: no-repeat
+) {
+  background: url($image + '.' + $extension) $repeat $position;
+
+  @media screen and (-webkit-min-device-pixel-ratio: 2),
+    screen and (min--moz-device-pixel-ratio: 2),
+    screen and (-moz-min-device-pixel-ratio: 2),
+    screen and (-o-min-device-pixel-ratio: 2/1),
+    screen and (min-device-pixel-ratio: 2),
+    screen and (min-resolution: 192dpi),
+    screen and (min-resolution: 2dppx) {
+    background: url($image + '@2x' + '.' + $extension) $repeat $position;
+    background-size: $width $height;
+  }
+
+  @media screen and (-webkit-min-device-pixel-ratio: 3),
+    screen and (min--moz-device-pixel-ratio: 3),
+    screen and (-moz-min-device-pixel-ratio: 3),
+    screen and (-o-min-device-pixel-ratio: 3/1),
+    screen and (min-device-pixel-ratio: 3),
+    screen and (min-resolution: 216dpi),
+    screen and (min-resolution: 3dppx) {
+    background: url($image + '@3x' + '.' + $extension) $repeat $position;
+    background-size: $width $height;
+  }
+}