[Resolved] Full Width Blog Page Header Image

[James]

The front page of my website shows the latest posts and is not static. I am trying to add a full-width image to the front page using the Blog Page Header Image under the WordPress customize section. I also added Blog Page Head Content in the form of just text to go over the image. When I use this method the responsiveness of the image does not seem to work quite right. I’d like the user of the website to be able to see the full image resized for their browser.

Here is a link to my website: tulsahog.com.

Please let me know if I am going about this right way.

[Leo]

Hi James,

Unfortunately background images are not responsive by nature.

There might be an alternative method though…Would you need to change the text often?

Let me know.

[James]

Leo,

I would not need to change the text often at all. Would using Sections for the first post which is a Sticky be an option? Or do you have a better option in mind?

[Leo]

Hmm not sure if you can edit the page like that if it’s set to show the latest posts.

I was thinking that you can first add the text in the image using any image editing software, then upload it through the After Header hook:
https://docs.generatepress.com/article/hooks-overview/
http://demo.generatepress.com/hook-locations/

with something like this:

<?php if ( is_front_page() && is_home()  ) { ?>
    Insert image here
<?php } ?>

Let me know if this helps.

[James]

Leo,

I just applied the webhook. The image does not resize for full width once the browser window is expanded in width past 1500px.

[Leo]

Ahh damn I was assuming that the actual image width much bigger than 1500px…

Did you buy that image from somewhere? Any chance you can get it in bigger resolution? 1920px would be nice.

[James]

No problem.

Yes, I have the original image the full size is 9940px x 6630px. I’ll take that image and modify it to work.

[Leo]

Sweet that should work nicely. Let me know.

[James]

Worked great! Thank you for your help!

[Leo]

You’re welcome 🙂

[Author]

Posts