diff --git a/app/assets/stylesheets/admin/welcome.css.scss b/app/assets/stylesheets/admin/welcome.css.scss
index 77cd21e134..89f277db4d 100644
--- a/app/assets/stylesheets/admin/welcome.css.scss
+++ b/app/assets/stylesheets/admin/welcome.css.scss
@@ -7,7 +7,7 @@
 
     @include fullbg;
     background-color: black;
-    background-image: url("/assets/home/tagline-bg.jpg");
+    background-image: image-url("home/tagline-bg.jpg");
     background-repeat: no-repeat;
     background-position: center center;
     margin-bottom: 2em;
diff --git a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
index a360c8f606..d3febdb28f 100644
--- a/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-navigation.css.scss
@@ -62,7 +62,7 @@ ordercycle {
     }
 
     select {
-      background-image: url('/assets/white-caret.svg');
+      background-image: image-url('white-caret.svg');
       background-size: 30px auto;
       background-position-x: 102%;
     }
@@ -147,7 +147,7 @@ shop ordercycle {
 
       select {
         background-color: $white;
-        background-image: url('/assets/black-caret.svg');
+        background-image: image-url('black-caret.svg');
         color: $grey-500;
         font-style: italic;
       }
diff --git a/app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.scss b/app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.scss
index e1b0d8ccbe..b6b237215e 100644
--- a/app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.scss
+++ b/app/assets/stylesheets/darkswarm/_shop-taxon-flag.css.scss
@@ -4,7 +4,7 @@
   products {
     product {
       .taxon-flag {
-        background: transparent url("/assets/flag.svg") top center no-repeat;
+        background: transparent image-url("flag.svg") top center no-repeat;
         background-size: 34px 39px;
         min-height: 40px;
         width: 34px;
diff --git a/app/assets/stylesheets/darkswarm/footer.scss b/app/assets/stylesheets/darkswarm/footer.scss
index 6a7f12dda6..9826970141 100644
--- a/app/assets/stylesheets/darkswarm/footer.scss
+++ b/app/assets/stylesheets/darkswarm/footer.scss
@@ -50,7 +50,7 @@ footer {
 
         width: 100%;
         border: 1px solid rgba($dark-grey, 0.35);
-        background-image: url("/assets/tile-wide.png");
+        background-image: image-url("tile-wide.png");
         background-position: center center;
         background-color: #bbb;
         padding: 12px 0 8px 0;
diff --git a/app/assets/stylesheets/darkswarm/home_panes.css.scss b/app/assets/stylesheets/darkswarm/home_panes.css.scss
index 60f881462d..20a8d82687 100644
--- a/app/assets/stylesheets/darkswarm/home_panes.css.scss
+++ b/app/assets/stylesheets/darkswarm/home_panes.css.scss
@@ -42,7 +42,7 @@
 }
 
 #stats.pane {
-  background-image: url("/assets/home/background-blurred-oranges.jpg");
+  background-image: image-url("home/background-blurred-oranges.jpg");
   background-position: center center;
   background-color: $ofn-grey;
 
@@ -94,7 +94,7 @@
   }
 
   .home-icon-box {
-    background-image: url("/assets/ofn-o.png");
+    background-image: image-url("ofn-o.png");
     background-position: center center;
     background-repeat: no-repeat;
     background-size: auto 100%;
@@ -121,15 +121,15 @@
       background-size: auto 100%;
 
       &.search {
-        background-image: url("/assets/icon-mask-magnifier.png");
+        background-image: image-url("icon-mask-magnifier.png");
       }
 
       &.shop {
-        background-image: url("/assets/icon-mask-apple.png");
+        background-image: image-url("icon-mask-apple.png");
       }
 
       &.pick-up-delivery {
-        background-image: url("/assets/icon-mask-truck.png");
+        background-image: image-url("icon-mask-truck.png");
       }
     }
   }
diff --git a/app/assets/stylesheets/darkswarm/home_tagline.css.scss b/app/assets/stylesheets/darkswarm/home_tagline.css.scss
index ffe4204869..c6cc15c9e8 100644
--- a/app/assets/stylesheets/darkswarm/home_tagline.css.scss
+++ b/app/assets/stylesheets/darkswarm/home_tagline.css.scss
@@ -13,7 +13,7 @@
     @include fullbg;
 
     background-color: $ofn-grey;
-    background-image: url("/assets/home/home.jpg");
+    background-image: image-url("home/home.jpg");
     position: fixed;
     left: 0;
     right: 0;
diff --git a/app/assets/stylesheets/darkswarm/mixins.scss b/app/assets/stylesheets/darkswarm/mixins.scss
index 2b38d89dea..41f90679fa 100644
--- a/app/assets/stylesheets/darkswarm/mixins.scss
+++ b/app/assets/stylesheets/darkswarm/mixins.scss
@@ -5,7 +5,7 @@
 // Generic \\
 
 @mixin tiledPane {
-  background-image: url("/assets/tile-wide.png");
+  background-image: image-url("tile-wide.png");
   background-color: $brand-colour;
   background-position: center center;
 
@@ -236,7 +236,7 @@
 
 @mixin producersbg {
   background-color: lighten($clr-turquoise, 68%);
-  background-image: url("/assets/producers.svg");
+  background-image: image-url("producers.svg");
   background-position: center 50px;
   background-repeat: no-repeat;
   background-size: 922px 763px;
@@ -244,13 +244,13 @@
 
 @mixin hubsbg {
   background-color: $brand-colour;
-  background-image: url("/assets/hubs-bg.jpg");
+  background-image: image-url("hubs-bg.jpg");
   background-position: center center;
 }
 
 @mixin groupsbg {
   background-color: lighten($clr-brick, 56%);
-  background-image: url("/assets/groups.svg");
+  background-image: image-url("groups.svg");
   background-position: center 50px;
   background-repeat: no-repeat;
   background-size: 922px 922px;
diff --git a/app/assets/stylesheets/darkswarm/page_alert.css.scss b/app/assets/stylesheets/darkswarm/page_alert.css.scss
index 4be82c8c2e..a9276ab56d 100644
--- a/app/assets/stylesheets/darkswarm/page_alert.css.scss
+++ b/app/assets/stylesheets/darkswarm/page_alert.css.scss
@@ -14,7 +14,7 @@ $page-alert-height: 55px;
     border-left: none;
     border-right: none;
     background-color: #bbb;
-    background-image: url("/assets/tile-wide.png");
+    background-image: image-url("tile-wide.png");
     background-position: center center;
     padding: 12px 0 8px 0;
     margin: 0;
diff --git a/app/assets/stylesheets/darkswarm/shop_search.css.scss b/app/assets/stylesheets/darkswarm/shop_search.css.scss
index cbe0bf6bd4..4b141cd021 100644
--- a/app/assets/stylesheets/darkswarm/shop_search.css.scss
+++ b/app/assets/stylesheets/darkswarm/shop_search.css.scss
@@ -32,7 +32,7 @@
     padding: 0 2.25em 0 2.75em;
     width: 100%;
     min-width: 0;
-    background: $white url("/assets/icn-search-grey.png") 1em center no-repeat;
+    background: $white image-url("icn-search-grey.png") 1em center no-repeat;
     font-size: 1rem; // avoid zoom on iphone, see issue #4535
 
     &::placeholder {