diff --git a/lib/nib/image.styl b/lib/nib/image.styl
index 4ec22ddf..1eb2e010 100644
--- a/lib/nib/image.styl
+++ b/lib/nib/image.styl
@@ -7,8 +7,18 @@
  * github.com/LearnBoost/stylus/issues/1038 ... refactor when those are closed
  */
 
+// We need this due to some weird scoping rule in Stylus. The @media selector
+// does not inherit its parent scope at all.
+nib-image--background-size(w = auto, h = auto)
+  if w in (cover contain) and h == auto
+    background-size: w null
+  else if w != auto or h != auto
+    background-size: w h
+
 image(path, w = auto, h = auto, min_pixel_ratio = 1.5)
+
   background-image: url(path)
+  nib-image--background-size w h
 
   s = 'all and (-webkit-min-device-pixel-ratio:' + min_pixel_ratio + '),'
   s = s + '(min--moz-device-pixel-ratio:' + min_pixel_ratio + '),'
@@ -21,6 +31,4 @@ image(path, w = auto, h = auto, min_pixel_ratio = 1.5)
     ext = extname(path)
     path = pathjoin(dirname(path), basename(path, ext) + '@2x' + ext)
     background-image: url(path)
-    if w in (cover contain) and h == auto
-        h = null
-    background-size: w h
+    nib-image--background-size w h
diff --git a/test/cases/image.css b/test/cases/image.css
index 1c5727b6..0382d91d 100644
--- a/test/cases/image.css
+++ b/test/cases/image.css
@@ -4,11 +4,11 @@
 @media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
   #logo {
     background-image: url("/images/branding/logo.main@2x.png");
-    background-size: auto auto;
   }
 }
 #logo {
   background-image: url("/images/branding/logo.main.png");
+  background-size: 50px 100px;
 }
 @media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
   #logo {
@@ -18,6 +18,27 @@
 }
 #logo {
   background-image: url("/images/branding/logo.main.png");
+  background-size: auto 100px;
+}
+@media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
+  #logo {
+    background-image: url("/images/branding/logo.main@2x.png");
+    background-size: auto 100px;
+  }
+}
+#logo {
+  background-image: url("/images/branding/logo.main.png");
+  background-size: 50px auto;
+}
+@media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
+  #logo {
+    background-image: url("/images/branding/logo.main@2x.png");
+    background-size: 50px auto;
+  }
+}
+#logo {
+  background-image: url("/images/branding/logo.main.png");
+  background-size: cover;
 }
 @media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
   #logo {
@@ -27,6 +48,7 @@
 }
 #logo {
   background-image: url("/images/branding/logo.main.png");
+  background-size: contain;
 }
 @media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
   #logo {
diff --git a/test/cases/image.styl b/test/cases/image.styl
index 12b35669..510efd6f 100644
--- a/test/cases/image.styl
+++ b/test/cases/image.styl
@@ -6,6 +6,12 @@
 #logo
   image: '/images/branding/logo.main.png' 50px 100px
 
+#logo
+  image: '/images/branding/logo.main.png' auto 100px
+
+#logo
+  image: '/images/branding/logo.main.png' 50px auto
+
 #logo
   image: '/images/branding/logo.main.png' cover