• Login
  • Register
    • Login Register
    Login
    Username/Email:
    Password:
    Or login with a social network below
  • Forum
  • Website
  • GitHub
  • Status
  • Translation
  • Features
  • Team
  • Rules
  • Help
  • Feeds
User Links
  • Login
  • Register
    • Login Register
    Login
    Username/Email:
    Password:
    Or login with a social network below

    Useful Links Forum Website GitHub Status Translation Features Team Rules Help Feeds
    Jellyfin Forum Support Themes & Styles [Help needed] Jellyfin Background CSS and Show Header Images

     
    • 0 Vote(s) - 0 Average

    [Help needed] Jellyfin Background CSS and Show Header Images

    Background CSS Overrides Show headers, need help fixing
    Pyroptical
    Offline

    Junior Member
    Posts: 9
    Threads: 2
    Joined: 2024 Aug
    Reputation: 0
    Country:United Kingdom
    #1
    2024-08-25, 06:27 PM (This post was last modified: 2024-08-25, 06:52 PM by Pyroptical. Edited 1 time in total.)
    Hihi,

    So just really got into this today and really happy with the look ive managed to achieve, bar one thing. Basically i've applied a nice background image via CSS, and it looks great on all the main menu pages, but as soon as i go into a show or an episode it covers up the header image, instead of the bottom of the page. would love some input. 

    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;}


    .backgroundContainer {
      background-color: rgba(0, 0, 0, 0);
      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');
      filter: blur(0px);
      background-size: cover;
    }


    this is my code as of right now, most of it is from ultrachromic, but with a bunch of testing I've found that those are working as intended, its just the code snippet i got from the official Jellyfin css page that giving me greif.


    Main menu looks great,  but this is how my show page looks
    [Image: 4rYY1E4.png]   [Image: pmci6JE.png]




    And this is the header image i want it to show with the css disabled, and a quick photoshop job of roughly what im aiming for
    [Image: ewnd16L.png]  [Image: oqZGoRN.jpeg]


    Thanks so much for taking the time to read, and thanks in advance for any help 💜


    So 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
    [Image: DIT6D9N.jpeg]
    Ted Hinklater
    Offline

    Member
    Posts: 149
    Threads: 8
    Joined: 2023 Nov
    Reputation: 22
    Country:United Kingdom
    #2
    2024-08-25, 07:09 PM (This post was last modified: 2024-08-25, 07:11 PM by Ted Hinklater. Edited 1 time in total.)
    Quote: 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
    [Image: DIT6D9N.jpeg]

    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
    Pyroptical
    Offline

    Junior Member
    Posts: 9
    Threads: 2
    Joined: 2024 Aug
    Reputation: 0
    Country:United Kingdom
    #3
    2024-08-25, 07:19 PM (This post was last modified: 2024-08-25, 07:20 PM by Pyroptical. Edited 1 time in total.)
    Quote:
    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

    [Image: UEWcwtY.jpeg]  [Image: ydebME0.jpeg]
    Pyroptical
    Offline

    Junior Member
    Posts: 9
    Threads: 2
    Joined: 2024 Aug
    Reputation: 0
    Country:United Kingdom
    #4
    2024-08-25, 07:25 PM (This post was last modified: 2024-08-25, 07:25 PM by Pyroptical.)
    ohhh figured it out just needed to add z-index: -2; to my original code, thanks for all the help 💜💜💜💜
    Pyroptical
    Offline

    Junior Member
    Posts: 9
    Threads: 2
    Joined: 2024 Aug
    Reputation: 0
    Country:United Kingdom
    #5
    2024-08-25, 07:40 PM (This post was last modified: 2024-08-25, 07:46 PM by Pyroptical. Edited 1 time in total.)
    I am however wondering if its possible to darken those header images, they seem a tad bright compared to normal,

    edit:
    Nvm got it, full code in case anyone wants 💜

    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;}



    .backgroundContainer {
      background-color: rgba(0, 0, 0, 0);
      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;
      z-index: -3;
    }

    .noBackdropTransparency .detailPageSecondaryContainer {
      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');
      filter: blur(0px);
      background-size: cover;
    }

    .backdropContainer {
       opacity: 0.5;
    }
    1
    Ted Hinklater
    Offline

    Member
    Posts: 149
    Threads: 8
    Joined: 2023 Nov
    Reputation: 22
    Country:United Kingdom
    #6
    2024-08-25, 08:14 PM
    Quote: but now the rest of jellyfin has no background, back to boring black

    Oh I know what that was, if you click your User pic in Jellyfin, go to Display, scroll down to Backdrops, I have it enabled.
    atma_weaponvi
    Offline

    Junior Member
    Posts: 12
    Threads: 3
    Joined: 2024 Jun
    Reputation: 0
    Country:Canada
    #7
    2025-01-14, 07:40 PM
    Excellent work man!
    « Next Oldest | Next Newest »

    Users browsing this thread: 1 Guest(s)


    • View a Printable Version
    • Subscribe to this thread
    Forum Jump:

    Home · Team · Help · Contact
    © Designed by D&D - Powered by MyBB
    L


    Jellyfin

    The Free Software Media System

    Linear Mode
    Threaded Mode