[wbgTHEMECOParticipant]

What would be the best way to have a background image that would site behind the header navigation area and extend down behind other sections (rows) below it. Please see the attached screen shot.

You have your standard integrity-5 header area with Nav. On the home page I’d create another section with a background image and have the Custom Headline with a button there.

Is it possible to set a background image on an outer div that would contain both the header area and the extra section (that I’d add via Cornerstone)?

[FriechModerator]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Cheers!

[wbgTHEMECOParticipant]

The site hasn’t been built yet, it was based on a design concept and was asked the question, can I do this. I didn’t see any stack that had a container that included the nav and sections below it so that I could put in a background image.

That said, let me get something built into a sandbox this weekend so that there is something we can work with and try.

Thanks for responding as quickly as you always do!

[RadModerator]

Hi there,

That can be easily done the setting the navbar and masthead’s background transparent, then set the masthead’s height to zero so it will appear overlaying on your section. And I think it’s best to use rev. slider for that section.

Thanks!

[wbgTHEMECOParticipant]

Do I set the masthead’s background to transparent within the customizer settings fro X theme or as custom global CSS?

[FriechModerator]

Hi There,

Yes, you can set the background color to transparent on customizer settings. But the icon stack does not have that option, so use the custom CSS below if you’re using the icon stack.

.x-topbar, .x-navbar, .x-logobar {
	background-color: transparent !important;
}

Hope it helps, Cheers!

[wbgTHEMECOParticipant]

This reply has been marked as private.

[RupokMember]

Hi there,

Thanks for writing back. Yes setting height: 0 is not same for Chrome and Firefox and I’d recommend using the absolute positioning instead of setting height to 0. Let’s use this instead :

.page .masthead {
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

Cheers!

[wbgTHEMECOParticipant]

Many thanks. That worked perfect!

[Paul RModerator]

You’re welcome! 🙂

[Author]

Posts