diff --git a/src/webpack/getDevConfig.ts b/src/webpack/getDevConfig.ts
index 68aaad0562..3406b938cb 100644
--- a/src/webpack/getDevConfig.ts
+++ b/src/webpack/getDevConfig.ts
@@ -42,7 +42,12 @@ export default (payloadConfig: SanitizedConfig): Configuration => {
     sideEffects: true,
     use: [
       require.resolve('style-loader'),
-      require.resolve('css-loader'),
+      {
+        loader: require.resolve('css-loader'),
+        options: {
+          url: (url) => (!url.startsWith('/')),
+        },
+      },
       {
         loader: require.resolve('postcss-loader'),
         options: {
diff --git a/src/webpack/getProdConfig.ts b/src/webpack/getProdConfig.ts
index 102c7a2fba..215ae19f30 100644
--- a/src/webpack/getProdConfig.ts
+++ b/src/webpack/getProdConfig.ts
@@ -48,7 +48,12 @@ export default (payloadConfig: SanitizedConfig): Configuration => {
     sideEffects: true,
     use: [
       MiniCSSExtractPlugin.loader,
-      require.resolve('css-loader'),
+      {
+        loader: require.resolve('css-loader'),
+        options: {
+          url: (url) => (!url.startsWith('/')),
+        },
+      },
       {
         loader: require.resolve('postcss-loader'),
         options: {
diff --git a/test/admin/placeholder.png b/test/admin/placeholder.png
new file mode 100644
index 0000000000..988d38ebbb
Binary files /dev/null and b/test/admin/placeholder.png differ
diff --git a/test/admin/styles.scss b/test/admin/styles.scss
index 85b0ab6e37..35121b5c56 100644
--- a/test/admin/styles.scss
+++ b/test/admin/styles.scss
@@ -1,5 +1,6 @@
 .nav__controls {
     font-family: monospace;
+    background-image: url('/placeholder.png');
 }
 .nav__controls:before {
     content: 'custom-css';