Hello,

I'm trying to achive a fixed background image (desktop and mobile) that doesn't move but the content does, example: https://css-tricks.com/the-fixed-background-attachment-hack/

This is how the page is laid out in Salient: https://prnt.sc/A36Q43EIpkfl

I've tried the following:

--

.page-id-15 #page-header-bg .page-header-bg-image-wrap, .full-width-section .row-bg .viewport-desktop .using-image, .wpb_row .row-bg {
position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;

    transform: scale(1.0); 
    &:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url("path");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }
    }

-- 

This didn't work, the background stays at the top while I move down with the content. I tried the following:

--

.page-id-15 #page-header-bg .page-header-bg-image-wrap, .full-width-section .row-bg .viewport-desktop .using-image, .wpb_row .row-bg {

background-attachment: fixed;
background-size: cover;
background-position: center top;
height: 100vh;
margin: 0;
display: flex;
} 

-- 

That still didn't work. I did see there was a post about a sticky background found here: https://themenectar.ticksy.com//ticket/3563776/

I still couldn't make the affect work. What am I doing wrong?

Hi Judith,

To see the full details with links please see ticket #3581988. Thank you!