[Resolved] Use section background image as fullscreen header image

[Jiri]

Hi!

I have a blog page with image gallery and i would like to use the featured image as a header image, which is shown over the whole fullscreen (aka cover). A normal header image hasn’t this option, so i tried to use the section and set the background image to the featured image. Of course this doesn’t work, because there is no content in this section.
Is there any css trick, how to show the whole background image, no matter there is no content, in this section?
Or maybe another way, how to set the header image to “cover” the fullscreen?
Thanks in advance for you reply!

Best regards Jiri

[Richard Bland]

Hi Jiri,

Thanks for reaching out.

I have done a similar thing in the past for the blog page.

What I did is to setup a GP Hook ‘After Header’ and put in my own conditional statement to only show a featured image on the blog page, see below.

<?php if ( is_home()||is_single() ) : ?>
FEATURED IMAGE
<?php endif; ?>

Then I simply created my own div container where it says FEATURED IMAGE and put in my image and content there, then added the custom CSS to create a full width, responsive image.

You could also use a plugin to put in say a slider using shortcodes, so this conditional statement is quite useful.

I hope this helps you along the way.

Kind Regards,

Richard Bland
Owner, BhambraBland
--
w: www.bhambrabland.co.uk
e: richard@bhambrabland.co.uk
--

[Jiri]

Thanks for your reply. May i ask, where exactly did you create your own div container?
Directly on the post page or somewhere in the code?
Thank you for the explanation!

Best regards Jiri

[Richard Bland]

Hi Jiri,

I would do it within the code so as a very simple way of doing this for example:

<?php if ( is_home()||is_single() ) : ?>
<div class="blog-featured-image">
<img src="path-to-image-url" />
</div>
<?php endif; ?>

The beauty of this is that you have total control of the content you put in there. You could create a div container with the image as the background, and then have some <h1> tags in there so they float over the image. You can get quite creative with this approach.

Kind Regards,

Richard Bland
Owner, BhambraBland
--
w: www.bhambrabland.co.uk
e: richard@bhambrabland.co.uk
--

[Jiri]

Thank you for your super fast reply and example!
I will try it!
Have a nice day!

Jiri

[Richard Bland]

Jiri,

I have an honest mistake to admit – in the latest version of GP Premium, you can in fact add in a page header just for the blog using the customiser.

Follow these steps:

1. Open customiser
2. Go to Blog and make sure you are on the blog page
3. You should now see options for ‘Page Header Image’ and ‘Page Header Content’
4. Add in your page header image
5. Now in the page header content, add in the content you wish to use to the text box, this will reveal additional options as you do so
6. Now ‘Enable Image Background’
7. Now ‘Enable Full Screen’
8. Choose ‘Enable Vertical Center’
9. Choose ‘Container Type Full Width’
10. Choose ‘Text Align Center’

This will enable the full width page header with background image!

If you do not want it to show full screen, disable that option and then play around with the ‘Padding’ settings at the bottom of the options to increase the height of the background image.

Sorry for not remembering this method…

Kind Regards,

Richard Bland
Owner, BhambraBland
--
w: www.bhambrabland.co.uk
e: richard@bhambrabland.co.uk
--

[Jiri]

Unfortunately this option doesn’t work for me. I have the latest version of GP Premium, but there is no change, when i define the image for the header in customizer.
I will try it through the hooks ..

Jiri

[Richard Bland]

That is an odd one. If you would like me to check your settings for you, please do email me again with a user login.

In order to see those settings via customiser you must be viewing the blog page in customiser and you must have some text or something in the content box. If you don’t none of the additional options appear.

Email me and when I get some spare time I can look for you.

Failing that, my first solution will definitely give you the ability to add in a featured image. You will just need to style it to your liking.

Kind Regards,

Richard Bland
Owner, BhambraBland
--
w: www.bhambrabland.co.uk
e: richard@bhambrabland.co.uk
--

[Jiri]

Thank you very much for your patience!
I have created an admin user for you, so you should get an email with your login.
It would be great, if you can check it, but it’s nothing important, so no hurry.

Jiri

[Richard Bland]

Hi Jiri,

I have updated your settings to allow for a full width image to be used above your blog posts on our blog page.

You can adjust the padding settings to change the height of the image being used, and of course you can change the image. You will need to put some content in the content box, taking that content out will result in the header image not being visible correctly.

I hope this has helped you, please confirm if this has resolved your issue.

Thank you

Kind Regards,

Richard Bland
Owner, BhambraBland
--
w: www.bhambrabland.co.uk
e: richard@bhambrabland.co.uk
--

[Jiri]

Hi!

Thank you very much for your time! It works exactly, as you describe. The problem is my wrong description. I wrote ‘blog page’, but i thought ‘post page’ 🙁
I’m really sorry for this mistake and your wasted effort.
I will try your idea with hooks.

Jiri

[Tom]

If you’re wanting it for individual posts, you can use the same options in the Page Header meta box.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jiri]

Thanks for your idea, but in the meta box is not possible to define ‘cover’ option, isn’t it?
I have to say, that my ‘post page’ is ‘boxed’ … but i would like to have a header image on full width of the page.

[Tom]

It has all of the same options, you just need to add content to the “Content” tab in the meta box in order to reveal all of the options: https://generatepress.com/knowledgebase/generate-page-header/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jiri]

Oh, i see it now!
Really, really thank you for you patience and amazing support!

[Author]

Posts