[Help needed] Jellyfin Background CSS and Show Header Images

[Pyroptical]

Code:

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/jf_font.css');

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/base.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/accentlist.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent-dashboard.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_frame.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_noborder.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_corner.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark_withaccent.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/progress/floating.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/glassy.css');

/*Accent and rounding*/

:root {--accent: 200, 90, 255;}

:root {--rounding: 12px;}



.itemsContainer.padded-left {
    position: top;
    z-index: 1;
}

.itemsContainer.padded-left::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9b521ad9-d3af-409a-9f5c-d1df13e0f365/di1hris-c3da11ee-4f13-4c27-98b1-546debe9b8a1.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzliNTIxYWQ5LWQzYWYtNDA5YS05ZjVjLWQxZGYxM2UwZjM2NVwvZGkxaHJpcy1jM2RhMTFlZS00ZjEzLTRjMjctOThiMS01NDZkZWJlOWI4YTEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.M-JhEVJZTozFd-PLLHF4r3hqdelbjou6Nre5sxZAxo4');
    background-size: cover;
    opacity: 1;
    z-index: -1;
    background-attachment: fixed;
}

.sectionTitleContainer.sectionTitleContainer-cards.padded-left::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9b521ad9-d3af-409a-9f5c-d1df13e0f365/di1hris-c3da11ee-4f13-4c27-98b1-546debe9b8a1.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzliNTIxYWQ5LWQzYWYtNDA5YS05ZjVjLWQxZGYxM2UwZjM2NVwvZGkxaHJpcy1jM2RhMTFlZS00ZjEzLTRjMjctOThiMS01NDZkZWJlOWI4YTEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.M-JhEVJZTozFd-PLLHF4r3hqdelbjou6Nre5sxZAxo4');
    background-size: cover;
    opacity: 1;
    z-index: -1;
    background-attachment: fixed;
}

/*Apply bg to detail Ribbon */
.detailPagePrimaryContainer {
    position: relative;
    z-index: 2;
}

.detailPagePrimaryContainer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9b521ad9-d3af-409a-9f5c-d1df13e0f365/di1hris-c3da11ee-4f13-4c27-98b1-546debe9b8a1.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzliNTIxYWQ5LWQzYWYtNDA5YS05ZjVjLWQxZGYxM2UwZjM2NVwvZGkxaHJpcy1jM2RhMTFlZS00ZjEzLTRjMjctOThiMS01NDZkZWJlOWI4YTEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.M-JhEVJZTozFd-PLLHF4r3hqdelbjou6Nre5sxZAxo4');
    background-size: cover;
    opacity: 1;
    z-index: -1;
}

/* Apply bg to detailPage content */
.detailPageSecondaryContainer {
    position: relative;
    z-index: 1;
}

.detailPageSecondaryContainer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9b521ad9-d3af-409a-9f5c-d1df13e0f365/di1hris-c3da11ee-4f13-4c27-98b1-546debe9b8a1.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzliNTIxYWQ5LWQzYWYtNDA5YS05ZjVjLWQxZGYxM2UwZjM2NVwvZGkxaHJpcy1jM2RhMTFlZS00ZjEzLTRjMjctOThiMS01NDZkZWJlOWI4YTEucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.M-JhEVJZTozFd-PLLHF4r3hqdelbjou6Nre5sxZAxo4');
    background-size: cover;
    opacity: 1;
    z-index: -1;
}

---

It's looking great by the way! Slick job

Thanks im pretty pleased with the look too. Amazing on the css, but not quite hit the mark though, got the detail page looking pretty much spot on but now the rest of jellyfin has no background, back to boring black