Single background image for whole page including header?

[Motoman]

Is there a way to have just a background image that shows top to bottom on the page, as opposed to having something different in the header area?  I’d like the header area to just be transparent and have the background image visible throughout.

[Andy]

Hello

Yes, the header area can be made transparent so the background image will show through.

In the customizer, go to ‘Header and Menu Styling’ and in the setting for ‘Header Background Color’ slide the transparency setting all the way to the left to 0 (zero).
Setting this to zero will make the header transparent across the whole site.

If you want a transparent header only on the homepage, set your preferred background color (for the whole of your site) as above, and then add this CSS to ‘Additional CSS’:

.home #masthead{
background: transparent;
}

[Motoman]

Thanks for that…actually, I’d want it to be as it is on the home page, but transparent everywhere else…could I do that?

[Andy]

In that case, set it to zero, and then for the homepage change the transparent part of the Additional CSS code for any color you like.

The color can be hexadecimal, rgb or rgba, for example #ff0000, rgb(255,0,0) or rgba(255,0,0,1)

in the rgba example the 1 at the end controls the transparency (0 is fully transparent and 1 is no transparency, so 0.5 would be half transparent).

[Motoman]

Thanks, that seems to be pretty close…but where the header was on non-home pages it shows as a gray bar now…doesn’t show the background image through…?

• This reply was modified 5 years, 9 months ago by Motoman.

[Andy]

Ahh yes I see what you mean now.
I initially assumed it was the homepage image that you wanted to show through, but I can now see it is the body background image that you need to show through the site header.

To make this so, add this code to Additional CSS:

.main-header{
    background: transparent;
}

[Motoman]

That did it – thank you!

[Author]

Posts