Blog header image

[Faye]

I have tried several options, but am going round in circles now.
I can’t seem to change the blog header image to be full width (as I have on the other pages). Is this possible?

Thanks 🙂

[Jamal]

Hi

As a starting point, have you tried setting the container type to full width? Like this ? (Imgur)

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Faye]

Yes, I’ve tried adding a page header (under edit page) and setting to full width (that’s how I did the images on the other standalone pages). However, on the blog page, adding a header doesn’t even make the image appear.

I’ve also tried under customise -> blog -> page header image. The image appears, but there is no option for full width.

[Jamal]

Can you please try blog > Page header content, write something in the content box and you should see options like the image in my previous post. Set that to full width and then save to see if it makes the image full-width.

If that works and you don’t want any content on the image you can delete the content in the Page header content tab and see if image remains full width.

Worth trying that and if it doesn’t work i’m sure Tom or Leo will have a solution for you.

Agressively support the kind of work you want to see. Buy it. Talk about it. Review it.

[Tom]

Forcing an image to be 100% wide can cause quality issues, but it’s possible with some CSS:

.page-header-image.grid-container {
    max-width: 100%;
}

.page-header-image img {
    width: 100%;
}

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

[Faye]

Just thought I’d update (so you can close this off!) and say that I got this working with a really nice static background using the following method. If anything seems like a dreadful idea, please do point it out.

I used the premium blog add on and added

<span class="I"></span>

to the content to generate a space for the background image, and set the container to full width. Then I used some css to set a background image (it was a very simple woocommerce shop page that I wanted to get the header on this time – which is the same as the blog page and doesn’t display a header by default):

div.page-header-content.generate-page-header.generate-content-header.generate-blog-page-header {
background-image: url("http://path-to-optimised-image.jpg");    
min-height:240px;
background-attachment: fixed;
background-position:center;
background-repeat:no-repeat;
background-size: cover;
}

Finally, to make sure it only appeared on the shop page (instead of the default blog page – so if you want to add a blog header, ignore this part), I added just the filter as described here:

https://docs.generatepress.com/article/blog-page-header/

Perfect 🙂

Thank you.

[Tom]

Awesome! Glad you found a solution. Thanks for sharing it 🙂

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

[Author]

Posts