diff --git a/themepo-elegantfin.css b/themepo-elegantfin.css
index db1892b..10d8c28 100644
--- a/themepo-elegantfin.css
+++ b/themepo-elegantfin.css
@@ -70,7 +70,23 @@
 
 body {
   font-family: var(--font-body);
-  background-color: var(--obsidian) !important;
+  background-color: var(--obsidian); /* Removed !important to allow Jellyfin/ElegantFin to override */
+}
+
+/* Ensure backdrops are visible */
+.backgroundContainer.withBackdrop, 
+.backdropContainer,
+.itemBackdrop {
+  z-index: -1; /* Ensure they stay behind content */
+}
+
+/* Hide the solid background and effects when a backdrop is active to let it show through */
+body:has(.backgroundContainer.withBackdrop) {
+  background-color: transparent !important;
+}
+
+body:has(.backgroundContainer.withBackdrop)::before {
+  opacity: 0.2; /* Reduce grain opacity over backdrops */
 }
 
 /* Titles and Headers use the Rune Font */