Sticky header with background image

[lisia]

Hello!

I would like to have the sticky header with a background image (my header image) instead of the choosen color in the customizer. Do you have an additional code for this?

I like Cordero very much!!!

Best regards, lisia

[lisia]

Sorry … I see, it is the background image on the pages, but I also want to have this behaviour also on the start-site.

lisia

• This reply was modified 4 years, 8 months ago by lisia.

[lisia]

I can explain it better now: I want to have the background image on the scrolled header also on sites, where I use the template “transparent header”. In the moment, there i have the color, which can be adjusted in the customizer.

Kind regards, lisia

[lisia]

I found part 1 of a solution with the following code:

#masthead.scrolled{
background-image: url(http://….)
}

But I also need the gradient overlay … either the gradient overlay always or never.

BR, lisia

[lisia]

Maybe I have found the solution by myself:

In the additional code I set the url of the header

#masthead.scrolled{
background-image: url(http://……..jpg)
}

Then I edited the page with the transparent header, the cover block – and there I could adjust the overlay.

Is my solution ok or is there a better way?

Best regards, lisia

[Andy]

“I would like to have the sticky header with a background image (my header image) instead of the choosen color in the customizer. Do you have an additional code for this?”

You could add a header image in ‘Customize’ > ‘Header Image’

and then to make the image only appear when scrolling down the page add this ‘Additional CSS’:

#masthead:not(.scrolled) {
    background-image: none !important;
}

[Andy]

Yes, the CSS code you wrote is another way of doing the same thing.

About the overlay, I’m not sure whether you want the overlay on the cover block or on the header image, as they are two different things.

The cover block overlay is easy to do as there are options in the block editor for this.

[Andy]

To give the scrolled header image a semi-transparent color overlay, us this CSS:

#masthead.scrolled:before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    content: "";
    background: red;
    opacity: 0.5;
}

[lisia]

Because the overlay in the original code and also with your additional code is over the logo, I have decided, not to use any overlay at all. I prepare my images before I use them.

Thank you nevertheless for the code. Kind regards, lisia

[lisia]

Hello Andy!

Thank you for so many answers. This code

#masthead:not(.scrolled) {
background-image: none !important;
}

doesn’t solve my problem. I want the header with the image everywhere, but I don’t want the plain coloured header in the transparent-header-template like the following picture (picture1) shows.

But it doesn’t matter – my solution is working (picture2).

Best regards, lisia

 

[Author]

Posts