[Help needed] Jellyfin Background CSS and Show Header Images

[Ted Hinklater]

quick edit:

i've managed to figure out how to apply the background to the bottom of the page, just need to rid the top half

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