Upper/lower backgrounds in sync with site container

[mgiraud]

Hi. I’m trying to recreate the Ethos demo background, in which there’s a lower image background and an upper color background positioned to reveal some of the background – and do it in sync with the site container so no matter the viewport, the reveal falls in the same place.

I’ve tried to dig into the Ethos css and copied this code:

.x-container.main:not(.x-row):not(.x-grid) {
    position: relative;    }

.x-content-sidebar-active .x-container.main:not(.x-row):not(.x-grid):before {    right: calc(100% - 72%); }

x-container.main:not(.x-row):not(.x-grid):before {
    content: "";
    display: block;
    position: absolute;
    top: -35px;
    bottom: 0;
    width: 10000em;
    background-color: #fff;
    z-index: -1;    }

… into my Global css but nothing happens. What does seem to work is something like

.x-bg-layer-upper-color {width:calc(100vw - 32%);}

but that doesn’t lock the background to the site container itself.

How do you do it? Thanks!

[tristup]

Hi @Matt,

Thanks for reaching out.
It is not clear which section of the demo you are trying to replicate. We tried to access your website, but could not log in as the given credentials are wrong.

Can you please share a screenshot marked with the section that you wanted to replicate and also reshare the credentials for the check?

Thanks

[mgiraud]

Sorry for the confusion - I was uploading another iteration of the site.

In the meantime, I found another way to achieve this, so consider this topic closed. Thanks!

[ruenel]

Awesome! Thanks for letting us know.