[Support request] How to use featured image for Page Header Background?

[Danny]

Hi,

Could I use featured image for page header background automatically, my need is blog post header have the header background with the featured image.

Thanks

GeneratePress 2.1

GP Premium 1.6.2

[Natalie]

does this help:
https://docs.generatepress.com/article/page-header-image/

[Danny]

Tried that but didn’t help as it didn’t take the featured img of the single post 🙂

[Leo]

Hi there,

This should help: https://generatepress.com/forums/topic/dynamic-post-header-based-on-featured-image/#post-514272

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Danny]

Is it this: “All you have to do is to create a page header and turn on Add Background Image without actually uploading an image in that specific page header.

This will make it so that the page header will automatically grab the featured image you assigned for that post/page and use it as a background image.”

I tried but can’t find where could I turn on background image without uploading or choosing specific image for the page header. Any suggestions?

[Tom]

Within the “Content” tab of your Page Header settings, there’s an “Add background image” option.

Is you turn that on, the plugin will do the rest for you.

Let me know if that doesn’t work 🙂

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

[Danny]

Yes It works but didn’t what I exactly want, could I make the background img full width like this: http://prntscr.com/jdy9x6

Tried to setting like this but didn’t work: http://prntscr.com/jdya6s

[Tom]

Can you link me to a specific page where I can see what it looks like now?

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

[Danny]

Hi,

The header I want to make: https://www.smartpassiveincome.com/podcasts/the-art-of-scaling-with-nathan-chan/

Mine now: https://monstermarketer.net/hello-world/ 😀

Thanks

[Tom]

Yours doesn’t look like it’s using the Page Header feature.

Have you created a Page Header in the Page Headers area? If so, have you applied it to single posts in “Page Headers > Global Locations”?

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

[Danny]

Hi Tom,

I already set it up

Global location: http://prntscr.com/jeaf66
Page header setup: http://prntscr.com/jeafdk

Any suggestion Tom?

Thanks

[Leo]

Try adding something in the content like HTML comment: <!--This is a comment.-->

Let me know.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Danny]

Thanks Leo, it worked 😀

1 more question, Could I set the height for the header to make it nice?

Now it ways too big >> https://monstermarketer.net/public-journal/

[Leo]

Try turning off full screen option and adjust the height with top and bottom padding:
https://docs.generatepress.com/article/page-header-content/#top-bottom-left-right-padding

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts