- This topic has 6 replies, 3 voices, and was last updated 4 years ago by
Tom.
-
AuthorPosts
-
January 6, 2017 at 2:12 am #261188
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 π
January 6, 2017 at 3:30 am #261206Jamal
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.
January 6, 2017 at 3:40 am #261209Faye
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.
January 6, 2017 at 3:54 am #261210Jamal
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.
January 6, 2017 at 8:47 am #261292Tom
Lead DeveloperLead DeveloperForcing 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-developmentMarch 30, 2017 at 2:49 am #299322Faye
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.
March 30, 2017 at 10:48 am #299486Tom
Lead DeveloperLead DeveloperAwesome! 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 -
AuthorPosts
- You must be logged in to reply to this topic.