Pro: How to Make Background Image for an ENTIRE Header?

[Artificer]

Hello. I’m loving this theme framework, but still sorting out where certain settings are.

I’m building a new site and using the Sticky Header on the Frontpage only.

I’m having trouble figuring out how to create the effect I want because I don’t appear to have a way to set a background for the entire header… only for bars within a header. So I can’t extend the background into the areas behind the menu bars.

I want to have the background image behind the entire header and then make the menu bars transparent so the header image shows through… but there does not seem to be a way to do that within the theme settings… unless I’m just missing it.

Also, I thought about assigning a div ID and then using that in custom CSS to set the background image, but I can’t even assign an ID to a header, again, unless I’m missing it. And, if that is the way to go about it, I’m not sure on the exact CSS I would use to do that only for this particular header (and only applying to the frontpage).

Maybe it’s simple and I’m just missing it, but there must be a relatively simple way of doing it.

Can you please advise on either the settings to use, or the exact CSS to make it work?

Thanks in advance!

Michael

[friech]

Hi Michael,

Thank you for writing in, you can target the entire header using this selector .x-masthead

Then apply the background-image property on it and other background property needed.

background-image: url(IMAGE URL HERE);
background-size: cover;
background-position: center;
background-repeat: no-repeat;

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

.x-masthead {
	background-image: url(IMAGE URL HERE);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

Hope it helps,
Cheers!

[Artificer]

Thank you! Very helpful. I appreciate it.

What I was thinking was close, but this is great.

[nabeel]

Glad we could help.

Cheers!