Full width header images as per demo

[Chris]

Hi Tom, I have all the plug ins, but cannot get my images to go full width as per the demo with the bike image (and the generate header demo).

I think this could be because the image is smaller than the container width. Would this be the case?

Additional related question: What does the Page Header Position position change? It makes no visible difference to my layout. As vs. the Single Post Header Position which does as expected.

Thanks!

Chris

[Chris]

Further related question: Is there a way to force the image full width if it is smaller? Obviously this would affect quality, just curious.

[Chris]

Hello again Tom, sorry to bombard with questions, but I’m having a really tough time getting this to work for me. I have now tried a wider image and it works fine as a full width header. However, I’m now struggling to get the other variations to work. For example, I cannot for the life of me get the image to appear below the page title.

How does where the image is uploaded, i.e. as a GP header image or as a WP featured image, affect how you can manipulate it afterwards?

Whereas before the “Page Header Position” menu seemed to do nothing, it is now the “Single Post Header Position” menu that seems to have no effect (hence not being able to get the image below the post header).

If you could give some step-by-step guidance on this I’d be really appreciative, I’m really confused!

Thanks,

Chris

[Chris]

Ok, sincere apologies for ongoing spamming. I think I figured out how it works and thought I’d ask you to confirm rather than having to spell it out for me in detail!

“Page Header Position is for Pages”…and “Single Post Header Position” is for Posts (i.e. Blog Posts).

So the reason I couldn’t get the image below the header was because I was working on a page, not a post.

Do I pass the test?

[Tom]

Hi Chris,

That’s correct 🙂

Did you figure out the full width image issue, or are you still having trouble with that? If so, which demo with the bike image are you referring to?

[Chris]

Hi Tom, thanks for confirming! 🙂

I could get a large image (same size as the container) to go full width, I couldn’t get a smaller image to go full width (container width is set to 1200 pixels, original smaller image was 600 or so).

So no, I didn’t figure it out. I guess it would be useful to know in case I need to fit an image that is slightly smaller or bigger than the container to full width. I tried the check boxes in the page header “content” tab that say “Use image (from image tab) as a background image” and “Make background image full screen”, but couldn’t see what effect that has (doesn’t seem like quite the right thing anyway).

I was referring to the part in the video at https://generatepress.com/ where the imager of the biker is set to full screen around 43/44 seconds in using the page header functionality. I’m guessing this image is just large enough to fit so defaults to full container width?

Any guidance appreciated!

[Tom]

Ah yea, if the image is large enough, it will take up the entire container width.

If it’s not, and you want it to, you can add this CSS:

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

Let me know if that does the trick or not 🙂

[Author]

Posts