Topic: background-image picture and gradient

Brigitte
February 22, 2024 at 5:50 am

Hello Support,

how is it possible to have a background-image in the header and a color gradient over this image?

I could not find an option and also it was not possible with CSS (because only 1 box).

Thanks, Brigitte

David

February 22, 2024 at 8:02 am

Hi there,

try adding this CSS to your site:


.site-header {
    position: relative;
}
.site-header .inside-header {
    position: relative;
    z-index: 1;
}
.site-header:after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(131,58,180,0.6) 0%, rgba(253,29,29,0.6) 50%, rgba(252,176,69,0.6) 100%);
}

This:
background: linear-gradient(90deg, rgba(131,58,180,0.6) 0%, rgba(253,29,29,0.6) 50%, rgba(252,176,69,0.6) 100%);

Is the CSS gradient property.
You can use this site to generate your own:
https://cssgradient.io

Brigitte
February 22, 2024 at 1:00 pm

THANKS! It seems to work! 🙂

I used this website https://cssgradient.io, but I did not use “.site-header:after”.
David
February 23, 2024 at 3:02 am

Glad to hear that!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

background-image picture and gradient