Background Color Overlay Layout Builder
conshelf
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
Pavel
Accepted AnswerHi. 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.
conshelf
Accepted AnswerHi Mehtaz,
Sure, here's the URL: https://okeanus.tscstrategic.com/products
As you can see, it applies the overlay to ALL main body elements.
Kind regards, John
conshelf
Accepted AnswerHello,
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
Accepted AnswerDid you insert this css on custom.css file? then remove it from there
conshelf
Accepted AnswerHi 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