[Support request] How to set header background image?

[Tim]

Seems like an easy thing, but after a lot of searching, I’m stumped on how/where I set an image on one Page that displays behind the semi-transparent header background color. It looks neat, and I want to do the same on other pages… but can’t figure out how.

I’ve got GP Premium + Elementor Pro. In Customize -> Background header…no images! Featured image for the page with the background isn’t set.

[Leo]

Hi there,

Can’t quite picture what you are trying to achieve.

You are trying to add a background image to a header and navigation that’s merge with the content?

Do you have an example to show?

[Tim]

Hi Leo – I’m new to the support forum. When I started the thread, there was a separate field for the URL “for admins”, so I put the example there. It’s a public site, so here it is again: https://www.orangegroveffo.org/activities/bookfair/ — see the book image behind the books header? I don’t know how I got it there. 😎

[Tom]

Hey Tim,

Have you checked out our Elements module? You can create a Header element and merge it with your site header. Then you can set a background image: https://docs.generatepress.com/article/header-element-overview/

Let me know if you need more info 🙂

[Tim]

Hi Tom – Thx. Yes, I had read the Elements blog post (after Books background was created). I enabled Elements yesterday, created and applied a header to Activity-> Color Run Page, but no image background appeared, so I removed all GP headers but “Books” background persists. Mystery…perhaps an Elementor thing, rather than GP?

P.S. Another data point: Initially, I tried GP w/ BeaverBuilder, picked the Pivotal theme, then on recommendation from a friend switched to Elementor. I tried switching to an “Elementor” specific template, but being pushed for time, reverted to Pivotal.

[Tom]

A background image will only appear automatically if a featured image is available and set. This is usually only true on singular templates (pages, posts etc..).

If it’s not a singular template, you’d need to upload a custom image inside your Header element.

You can technically use Elementor in Pivot – you’d just need to rebuild the pages in Elementor.

[Tim]

There was no featured image set for the page, nor a page header template selected in the Layout, yet the books image showed up under the book fair page header color banner. See screenshot below:

Update: Ugh, well, now I’ve done it! Doh….

While trying to figure out how the books in the image below got into the orange header…

I set the header image (for all pages) via Legacy Page Headers. That results in the kids in the background…which looks good, but… then all pages were the same…

hmm… I can fix that, I thought…

I deactivated “Page Headers” in GP…and that’s when things went badly.

I mashed the keys quickly to setup a Header Element for All Pages. The site is now mostly working, but I’ll take a break and review Moving hooks-page-headers to Elements/ before trying to “fix” it more.

New problems: Featured image appears in the background header, but also in body which throws off the page body layout. I had to “Disable Featured Image/Header” – which disables the featured image, but not the header, which shows the fallback image, go figure!
I can’t get the Page Hero heading text to move of the left edge of the page.
And, the background image is not tiled like in the legacy screenshot… so, uh, it doesn’t look good.

P.S. Yes, I know I should have backed up before mucking about.

[Author]

Posts