[Resolved] Header element not working to set Hero background image merged with site nav?

[Jeffrey]

Does not work for me, multiple problems on front page.

I have background image set to cover. No background image appears. Element does not recognize Elementor content. Footer gets merged with header. Yuk!

[Tom]

Hi there,

Does the Page Hero have any content in it? If not, you’ll need to add something in order for the Element to display.

If you only want the background image to display, add this to the hero content:

<!-- Page Hero -->

Then make sure you have top/bottom padding applied to set the height of the hero.

[Jeffrey]

Thanks Tom. I did indeed track down the information regarding <!– Page Hero –>, and got the background image to display (as cover). My site footer is still being merged with my nav header at the top, and my Elementor content is being pushed below the header (I suppose this is to be expected but what about the footer, why is it misplaced?). Essentially what I am seeking is a template that can be applied and have the similar effect as setting a background image in the customizer. That never affected the positioning of the content on the page. But I do not want the same background applied site wide, just a specific hero template is what I am seeking. Regarding content overlaying or part of this header, I think I can use Elementor shortcodes within the editor to lay it out. I am not sure what the padding does as I experiment with that, it alters the appearance of the background image somehow. I will continue to experiment…

[Tom]

I’m not seeing the Hero overlapping the footer: https://www.screencast.com/t/WawwBvuU

Is that happening on a specific page?

When the header merges with the hero, the height of the header is no longer within the flow of the page, so if there’s not enough height in the hero or your content, it’s possible that it will overflow into the footer.

To prevent this, just make sure the pages with a hero have enough height (whether in the hero, or your content).

[Jeffrey]

Thanks Tom I am working on this and making some progress although still wrestling conceptually if this will work into the right flow for me.

I had some snippet code that was added to push the footer to the bottom of the view height, somehow interfering and causing some sort of merge of the footer into the header when interacting with this element. I have corrected that by moving from legacy hooks and snippets to elements hooks where I can assign that code to pages where it is needed. So that code got removed from the front page which fixed the issue there. (although it brings up a separate issue when I want that code working with the hero element such as on the registration page).

I then added Elementor shortcode to the hero header. Which is shaping things up as seen in your picture.

Can I overlay header elements onto the same page? (to separate content from background nav). That is what I am going to try next. I want to apply the hero background and nav to several pages, but with different content overlaying the image on each. I could use a separate element just for each pages content.

[Jeffrey]

There are some confusing aspects to me. So the background image is set to full screen but this does not apply towards the content area. When I set vertical position to top, center, or bottom, nothing changes. If I apply padding I can get the content to move, but this alters also the position of the background image pushing it beyond the boundaries of the viewable screen.

[Jeffrey]

When I go to mobile view, the content gets pushed to the bottom (which is where I currently set it in vertical alignment). On desktop it remains at top. Take a look if you can.

[Jeffrey]

I may be making this harder than it should be.

I simply want a hero background image I can apply to whatever page I want. I want the image to lie beneath a clear nav header (set in customizer). I then want the content area for the page to begin under the header. (as it should be if the background image were defined in customizer). Like Thrivecart’s home page. I had all this working through the customizer, but I do not want the background image site-wide. I just want a hero background for select pages.

Can you point me in the most logical direction using Elements? Perhaps a hook to simply define the background image with html?

[Jeffrey]

I cannot figure it out. It seems what I need is to define CSS attached to a layout. I could use the CSS to set the background image for the body, although I am not sure how to code the image to reside behind the (clear) nav header. But once I got it fully defined I could assign wherever needed. With the header element pushing content below it, it just defeats the purpose. There are workarounds but why assign page content to the header in order to get it looking like a hero, since it then defeats the purpose of having a reusable element. I also played with negative margins in Elementor (to raise the content up and over the header) using percentages but I could not get consistent predictable results (perhaps because of the large values required?). I don’t really like the idea of assigning a background image in the customizer only to serve the purpose of a few pages, although this is what I did before and it produced the right result. I thought I could just replicate that as some sort of element and apply only where needed.

[Tom]

There isn’t a way to set a background image to the body on a per-page basis without CSS, unfortunately.

What I would do is:

1. Set a global background image in Customize > Background Images.
2. Set your header/navigation to transparent/semi transparent using the color options in Customize > Colors.

Then use CSS to change the background image depending on the page we’re viewing.

For example, if we’re working on a page with the ID of 10, we would do this:

body.page-id-10 {
    background-image: url( 'URL TO IMAGE HERE' );
}

Then if we need to apply one to ID 20, we would do this:

body.page-id-20 {
    background-image: url( 'URL TO IMAGE HERE' );
}

This way, the background image applies to the entire site, not just the hero element.

Let me know if that makes more sense or not – it should simplify things a lot 🙂

[Jeffrey]

Yes, I guess that simplifies matters, thanks!

I am going to look for some CSS to put an overlay on the background image. (hint: would be a nice option in the customizer)

[Tom]

I agree! For now, you’d need to use CSS:

body {
    background-image: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('URL TO YOUR IMAGE');
}

[Jeffrey]

Works great, thanks!

[Tom]

You’re welcome 🙂

[Jeffrey]

Do you see the benefit of being able to set that CSS as an element? I use Simple CSS now, but it seems some sort of in-between granularity could be useful.

[Author]

Posts