Archived topic
Hero image not showing
7 replies · Started by Endre on January 6, 2022
Hello guys.
I am creating a new website and for the first time trying to create a hero background image that should show up on all pages. I followed your instructions per the video, but nothing shows up. What could the problem be?
https://docs.generatepress.com/article/header-element-overview/
Thanks.
Hi there,
1. Did you add any content to the Page Hero text field in the Header Element?
2. What are the Display Rules of the Header Element ? And where do you want it displayed
Thanks, it partially solved my problem, I did not pay attention to this:
"If you only want to use the background image without adding any content, simply add some HTML comments:
<!--This is a comment.-->"
Now what remains is that I would like to display my content in all pages overlaying this background image - as opposed to noy it displays below it. My content is made in Elementor. How do I do it?
Thanks a lot David.
Aah - i dont think you want a Header Element if you want it as a background to the site.
Instead:
1. Dashboard > Appearance > GeneratePress and enable the Backgrounds module.
2. Customizer > Backgrounds and add the image to the Body.
This will display behind the content of the site.
Thanks. It does work for elementor blocks overlay. However, with the header element I did like having the possibility to have a different background pic for all of my pages by pulling in from the "featured image" of the specific page. With your solution I do lose that option, right? So it is one or the other?
Just to be clear, ideally you would like the Featured Image to be displayed behind all the content of the page ?
Yes. Behind my elementor content...
Hi Endre,
Can you provide a mockup image of how you want the background image to be applied?
Current, I see a background image applied as a background to the <body> tag of your site which effectively makes it the background of the entire page.
If you wish to have this as a dynamic value, you can try applying a dynamic CSS value for the background-image property using this PHP snippet:
add_action('wp_head', function(){
global $post;
$featured_img_url = get_the_post_thumbnail_url($post->id);
echo '<style>
body {
background-image: url('.$featured_img_url.');
background-repeat: no-repeat;
background-size: 100% auto;
}</style>';
});