(CSS Help) Editing Elegantfin?

(CSS Help) Editing Elegantfin? - Printable Version

+- Jellyfin Forum (https://forum.jellyfin.org)
+-- Forum: Support (https://forum.jellyfin.org/f-support)
+--- Forum: Themes & Styles (https://forum.jellyfin.org/f-themes-styles)
+--- Thread: (CSS Help) Editing Elegantfin? (/t-css-help-editing-elegantfin)

(CSS Help) Editing Elegantfin? - AbendrotBarbecue - 2025-08-20

Hello! CSS Newbie here! I'd like to ask if it's possible at all to change or add a command that changes the background when using the Elegantfin theme to include a background while also including the backdrops? Here's what I'm talking about...

Code:
.backgroundContainer {

  background-color: rgba(0, 0, 0, 0);

  background-image: url('https://wallpapers.com/images/hd/purple-space-background-1920-x-1080-4jj3c9164lcd1o2c.jpg');

  filter: blur(4px);

  background-size: cover;

}

Doesn't actually seem to work, this just looks like regular elegantfin

but when I add the !important tag...

Code:
.backgroundContainer {

  background-color: rgba(0, 0, 0, 0);

  background-image: url('https://wallpapers.com/images/hd/purple-space-background-1920-x-1080-4jj3c9164lcd1o2c.jpg') !important;

  filter: blur(4px);

  background-size: cover;

}

it forces over the backdrop, too.

Is there a way to get Elegantfin to replace the colour with an image without eating the backdrop too? Would it be a simple additive command or would I need to change the code of the theme itself? I have looked at the code for elegantfin itself and can't make heads or tails of it beyond the command to change colours (which I will). Any answers appreciated as I have no idea what I'm doing.

Thank you in advance!