diff --git a/elements/pf-background-image/demo/ssr.html b/elements/pf-background-image/demo/ssr.html
new file mode 100644
index 0000000000..55643c20a1
--- /dev/null
+++ b/elements/pf-background-image/demo/ssr.html
@@ -0,0 +1,7 @@
+<pf-background-image filter
+    src="pfbg.jpg"
+    src-2x="pfbg_576.jpg"
+    src-sm="pfbg_768.jpg"
+    src-sm-2x="pfbg_768@2x.jpg"
+    src-lg="pfbg_1200.jpg"
+></pf-background-image>
diff --git a/elements/pf-background-image/test/pf-background-image.ssr.ts b/elements/pf-background-image/test/pf-background-image.ssr.ts
new file mode 100644
index 0000000000..76f34b361d
--- /dev/null
+++ b/elements/pf-background-image/test/pf-background-image.ssr.ts
@@ -0,0 +1,16 @@
+import { SSRPage } from '@patternfly/pfe-tools/test/playwright/SSRPage.js';
+import { test } from '@playwright/test';
+
+const tagName = 'pf-background-image';
+
+test.describe(tagName, () => {
+  test('ssr', async ({ page }) => {
+    const fixture = new SSRPage(tagName, page, {
+      demoURL: new URL('../demo/ssr.html', import.meta.url),
+      importSpecifiers: [
+        '@patternfly/elements/pf-background-image/pf-background-image.js',
+      ],
+    });
+    await fixture.snapshot();
+  });
+});