Full width header images as per demo

Home Forums Support Full width header images as per demo

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #127090
    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

    #127091
    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.

    #127092
    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

    #127093
    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?

    #127117
    Tom
    Lead Developer
    Lead Developer

    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?

    #127127
    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!

    #127146
    Tom
    Lead Developer
    Lead Developer

    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 🙂

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.