Background Color Overlay Layout Builder - Forum | JoomShaper
Solved Helix Framework

Background Color Overlay Layout Builder

Asked by conshelf 5 years ago Last activity 5 years ago

Hello,

Is there an easy way to get a background overlay over the background image in the bottom section?

It would be nice if this was a background option in the layout builder like it is in SP Page Builder.

I've tried adding custom CSS but even though I've specified the bottom section, the overlay covers the entire page.

section#sp-bottom:before {
    background: rgba(0,0,0,0.3);
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

Kind regards,
John

Accepted answer

Marked as the solution
Pavel
5 years ago

Hi. This code will work.

#sp-bottom {
    position: relative;
}
#sp-bottom::before {
    background: rgba(0,0,0,0.3);
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

Just do not forget to delete your previous code. It is still there.

7 more replies

Oldest first Newest first Most helpful
Mehtaz Afsana Borsha Staff
5 years ago

Hi,
Give me your site URL and also screenshot of that portion

conshelf Asked this
5 years ago

Hello,

I've tried apply to just the container as well with this CSS, but that didn't work either:

#sp-bottom .container:before {
    background: rgba(0,0,0,0.3);
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

I have to remove this CSS for now as it ruins the layout.

Kind regards,
John

Mehtaz Afsana Borsha Staff
5 years ago

Did you insert this css on custom.css file? then remove it from there

conshelf Asked this
5 years ago

Hi Mehtaz,

The CSS has been removed.

It doesn't work, hence the reason I asked the question is there an easy way to get a background overlay over the background image in the bottom section?

Kind regards,
John

conshelf Asked this
5 years ago

Awesome, thank you Pavel, your solution worked perfectly!!!

Log in to reply.