adding poster. logo, background to title page

[2020]

I've been trying add adding poster. logo, background to title page this is the main thing I want from my a theme or a custom css change, finimalism7 did this but its no longer supported. 
I tried customising finimalism but everything's a little smaller making it hard to see.

I tried taking Elegantfin theme as the base and adding a custom code, but I end up breaking things like mobile view and actor profile. code I tried to use.  

Code:

GLOBAL TWEAKS (Applied to ALL devices) */

/* Essential card display rule (your original rule, kept global) */
.card {
    display: block !important;
}

/* Ensure the poster stacks ON TOP of the logo/header on overlap */
/* This is necessary because the logo often has a high default Z-index */
.detailImageContainer .card {
    z-index: 100 !important;
}


/* 3. MOBILE-ONLY FLOW OVERRIDE (For screens < 900px) */
/* This block forces the poster/image area to appear first, and the logo second. */
@media (max-width: 899px) {

    /* Force the logo to appear below the image/ribbon section */
    .detailLogo {
        top: auto !important; /* Remove fixed position */
        position: relative !important;
        margin-top: 1em !important; /* Add spacing below the image */
    }
   
    /* Ensure the main image area is displayed in the flow */
    .detailImageContainer.hide-mobile {
        height: auto !important;
        display: block !important;
    }
   
    /* Pull the logo out of the main ribbon area's influence */
    .detailRibbon {
        flex-direction: column !important;
    }
}


/* 4. DESKTOP-ONLY STYLES (Your Original Layout, isolated to screen width >= 900px) */
@media (min-width: 900px) {

    /*=====Arura Grid Layout (Desktop)===*/
    .detailGridContainer {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }

    .detailRibbon {
        grid-column: 1;
        grid-row: 1;
    }

    .detailSectionContent {
        grid-column: 2;
        grid-row: 1;
    }

    .itemDetailsGroup {
        grid-column: 1;
        grid-row: 2;
    }

    .trackSelections {
        grid-column: 2;
        grid-row: 2;
    }
   
    /* === Your Original Positioning and Spacing Overrides (Desktop) === */
    [dir=ltr] .detailPagePrimaryContent {
        padding-left: 3em !important;
    }
    .layout-desktop [dir="ltr"] .detailRibbon, .layout-tv [dir="ltr"] .detailRibbon {
        flex-direction: column;
        width: 30% !important;
    }
    .detailSection {
        margin-top: -9em;
    }

    .layout-desktop .detailRibbon {
        height: 10% !important;
        min-height: 0 !important;
    }

    /* CRITICAL POSTER & WRAPPER POSITIONING BLOCK - DESKTOP ONLY */
    .layout-desktop .detailImageContainer .card {
        position: relative !important;
        width: 35vh !important;
        float: none;
        left: 0 !important;
        top: 0;
        right: 0;
        margin: unset;
        margin-bottom: 0;
        place-self: start;
        top: -25vh !important;
        margin-left: 12em !important;
    }
   
    /* LOGO POSITIONING - DESKTOP ONLY */
    .detailLogo {
        top: calc(80vh - var(--clearLogoBottomSpace) - var(--primaryItemPageNegativeSpace)) !important;
    }

    /* PULLING UP THE WRAPPER - DESKTOP ONLY */
    .layout-desktop .detailPageWrapperContainer {
        margin-top: -13em !important;
    }
   
    .detailImageContainer.hide-mobile {
        height: 19em;
    }
}

Could anyone help with this ? 
I could switch the base theme if need.