diff --git a/src/_rules/background.js b/src/_rules/background.js
index b08d654..69e4a73 100644
--- a/src/_rules/background.js
+++ b/src/_rules/background.js
@@ -51,18 +51,13 @@ export const backgrounds = [
   ['bg-inherit', { 'background-color': 'inherit' }],
   ['bg-transparent', { 'background-color': 'transparent' }],
   ['bg-current', { 'background-color': 'currentColor' }],
+  [/^bg-\[(var\(--.+\)|--.+)]$/, ([, val]) => ({ 'background-color': val.startsWith('--') ? `var(${val})` : val })],
 
-  // arbitrary color
-  [/^bg-\[(--.+)]$/, ([, p]) => ({ 'background-color': `var(${p})` })],
-  [/^bg-\[(var\(--.+\))]$/, ([, p]) => ({ 'background-color': p })],
-
-  // arbitrary image
+  // image
+  ['bg-none', { 'background-image': 'none' }],
   [
     /^bg-\[(url\(.+\))]$/,
-    ([, p]) => {
-      // Extract potential css variable from url: url(var(--a-background-image-url)) -> var(--a-background-image-url)
-      const cssVar = p.match(/^url\((var\([^)]+\))\)$/)?.[1];
-      return { 'background-image': cssVar ?? p };
-    },
+    // Extract potential css variable from url: url(var(--a-background-image-url)) -> var(--a-background-image-url)
+    ([, p]) => ({ 'background-image': p.match(/^url\((var\([^)]+\))\)$/)?.[1] ?? p }),
   ],
 ];
diff --git a/test/__snapshots__/background.js.snap b/test/__snapshots__/background.js.snap
index 2f74695..60be84f 100644
--- a/test/__snapshots__/background.js.snap
+++ b/test/__snapshots__/background.js.snap
@@ -1,14 +1,5 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`bg arbitrary 1`] = `
-"/* layer: default */
-.bg-\\[url\\(\\'\\/img\\/hero-pattern\\.svg\\'\\)\\]{background-image:url('/img/hero-pattern.svg');}
-.bg-\\[url\\(\\"\\/img\\/hero-pattern\\.svg\\"\\)\\]{background-image:url("/img/hero-pattern.svg");}
-.bg-\\[url\\(\\"data\\:image\\/svg\\+xml\\,\\%3csvg\\ xmlns\\=\\'http\\:\\/\\/www\\.w3\\.org\\/2000\\/svg\\'\\ viewBox\\=\\'0\\ 0\\ 16\\ 16\\'\\ fill\\=\\'white\\'\\%3e\\%3cpath\\ d\\=\\'M12\\.207\\ 4\\.793a1\\ 1\\ 0\\ 010\\ 1\\.414l-5\\ 5a1\\ 1\\ 0\\ 01-1\\.414\\ 0l-2-2a1\\ 1\\ 0\\ 011\\.414-1\\.414L6\\.5\\ 9\\.086l4\\.293-4\\.293a1\\ 1\\ 0\\ 011\\.414\\ 0z\\'\\/\\%3e\\%3c\\/svg\\%3e\\"\\)\\]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");}
-.peer:checked~.peer-checked\\:before\\:bg-\\[url\\(\\'data\\:image\\/svg\\+xml\\,\\%3Csvg\\ width\\=\\"16\\"\\ height\\=\\"16\\"\\ viewBox\\=\\"0\\ 0\\ 16\\ 16\\"\\ fill\\=\\"none\\"\\ xmlns\\=\\"http\\:\\/\\/www\\.w3\\.org\\/2000\\/svg\\"\\%3E\\%3Cpath\\ d\\=\\"M4\\ 8L7\\ 11L12\\.5\\ 5\\"\\ stroke\\=\\"\\%2371717A\\"\\ stroke-width\\=\\"1\\.5\\"\\ stroke-linecap\\=\\"round\\"\\ stroke-linejoin\\=\\"round\\"\\/\\%3E\\%3C\\/svg\\%3E\\'\\)\\]::before{background-image:url('data:image/svg+xml,%3Csvg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4 8L7 11L12.5 5" stroke="%2371717A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');}
-.before\\:bg-\\[url\\(var\\(--w-form-check-mark\\)\\)\\]::before{background-image:var(--w-form-check-mark);}"
-`;
-
 exports[`bg attachments 1`] = `
 "/* layer: default */
 .bg-fixed{background-attachment:fixed;}
@@ -29,6 +20,17 @@ exports[`bg clip 1`] = `
 .bg-clip-unset{-webkit-background-clip:unset;background-clip:unset;}"
 `;
 
+exports[`bg images 1`] = `
+"/* layer: default */
+.bg-none{background-image:none;}
+.bg-\\[url\\(\\'\\/img\\/hero-pattern\\.svg\\'\\)\\]{background-image:url('/img/hero-pattern.svg');}
+.bg-\\[url\\(\\"\\/img\\/hero-pattern\\.svg\\"\\)\\]{background-image:url("/img/hero-pattern.svg");}
+.bg-\\[url\\(\\"data\\:image\\/svg\\+xml\\,\\%3csvg\\ xmlns\\=\\'http\\:\\/\\/www\\.w3\\.org\\/2000\\/svg\\'\\ viewBox\\=\\'0\\ 0\\ 16\\ 16\\'\\ fill\\=\\'white\\'\\%3e\\%3cpath\\ d\\=\\'M12\\.207\\ 4\\.793a1\\ 1\\ 0\\ 010\\ 1\\.414l-5\\ 5a1\\ 1\\ 0\\ 01-1\\.414\\ 0l-2-2a1\\ 1\\ 0\\ 011\\.414-1\\.414L6\\.5\\ 9\\.086l4\\.293-4\\.293a1\\ 1\\ 0\\ 011\\.414\\ 0z\\'\\/\\%3e\\%3c\\/svg\\%3e\\"\\)\\]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");}
+.bg-\\[url\\(\\/img\\/hero-pattern\\.svg\\)\\]{background-image:url(/img/hero-pattern.svg);}
+.peer:checked~.peer-checked\\:before\\:bg-\\[url\\(\\'data\\:image\\/svg\\+xml\\,\\%3Csvg\\ width\\=\\"16\\"\\ height\\=\\"16\\"\\ viewBox\\=\\"0\\ 0\\ 16\\ 16\\"\\ fill\\=\\"none\\"\\ xmlns\\=\\"http\\:\\/\\/www\\.w3\\.org\\/2000\\/svg\\"\\%3E\\%3Cpath\\ d\\=\\"M4\\ 8L7\\ 11L12\\.5\\ 5\\"\\ stroke\\=\\"\\%2371717A\\"\\ stroke-width\\=\\"1\\.5\\"\\ stroke-linecap\\=\\"round\\"\\ stroke-linejoin\\=\\"round\\"\\/\\%3E\\%3C\\/svg\\%3E\\'\\)\\]::before{background-image:url('data:image/svg+xml,%3Csvg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4 8L7 11L12.5 5" stroke="%2371717A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');}
+.before\\:bg-\\[url\\(var\\(--w-form-check-mark\\)\\)\\]::before{background-image:var(--w-form-check-mark);}"
+`;
+
 exports[`bg origins 1`] = `
 "/* layer: default */
 .bg-origin-border{background-origin:border-box;}
diff --git a/test/background.js b/test/background.js
index 8abce35..bab9736 100644
--- a/test/background.js
+++ b/test/background.js
@@ -43,14 +43,8 @@ test('bg clip', async ({ uno }) => {
   expect(css).toMatchSnapshot();
 });
 
-test('bg invalid', async ({ uno }) => {
-  const classes = ['bg-white', 'bg-none'];
-  const { css } = await uno.generate(classes);
-  expect(css).toHaveLength(0);
-});
-
-test('bg arbitrary', async ({ uno }) => {
-  const classes = [`bg-[url('/img/hero-pattern.svg')]`, `bg-[url("/img/hero-pattern.svg")]`, `before:bg-[url(var(--w-form-check-mark))]`, `peer-checked:before:bg-[url('data:image/svg+xml,%3Csvg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4 8L7 11L12.5 5" stroke="%2371717A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E')]`, `bg-[url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")]`];
+test('bg images', async ({ uno }) => {
+  const classes = ['bg-none', `bg-[url(/img/hero-pattern.svg)]`, `bg-[url('/img/hero-pattern.svg')]`, `bg-[url("/img/hero-pattern.svg")]`, `before:bg-[url(var(--w-form-check-mark))]`, `peer-checked:before:bg-[url('data:image/svg+xml,%3Csvg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M4 8L7 11L12.5 5" stroke="%2371717A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E')]`, `bg-[url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")]`];
   const { css } = await uno.generate(classes);
   expect(css).toMatchSnapshot();
 });
@@ -68,7 +62,7 @@ test('supports setting arbitrary background positions', async ({ uno }) => {
 });
 
 test('invalid background color classes', async ({ uno }) => {
-  const classes = ['bg-color', 'background-[--w-s-color-background]', 'background-[var(--w-s-color-background)]'];
+  const classes = ['bg-white', 'bg-color', 'background-[--w-s-color-background]', 'background-[var(--w-s-color-background)]'];
   const { css } = await uno.generate(classes);
   expect(css).toHaveLength(0);
 });