[Resolved] Centering Vertical Alignment of Featured Image in Page Header Add-on

Home Forums Support [Resolved] Centering Vertical Alignment of Featured Image in Page Header Add-on

Home Forums Support Centering Vertical Alignment of Featured Image in Page Header Add-on

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #539186
    Suggie

    Hi guys.

    I’m using your Page Headers Add-on for a full-width header to pull the featured image; however, if the featured image is taller than what the header can handle, it displays the image from the top and cuts off the bottom. Is it possible to set it so that it always shows Center Center for the alignment of the featured image?

    Current settings are as follows:

    Container: Full Width
    Top/Bottom Padding: 27%

    Featured image size is 2000×1100.

    This is really just a concern on desktop. I’m trying to avoid adding more padding to the top/bottom just to get the image to show on desktop, and I didn’t want to have to change the size of the featured image. On mobile and tablet, the padding allows pretty much the full image height to show.

    Hope this makes sense! I included a URL in this request. The image currently shows the top of the palm tree and building. Should show the whole building and some of the water below it. Thanks!

    GP Premium 1.6.2
    #539279
    Tom
    Lead Developer
    Lead Developer

    It’s possible as long as you’re not using parallax. The parallax feature requires the image to start at the top.

    This is the CSS to do it:

    .generate-content-header {
        background-position: center center;
    }
    #540038
    Suggie

    Worked like a charm. As always, thanks for the fast and friendly support!

    #540316
    Tom
    Lead Developer
    Lead Developer

    Awesome, you’re welcome! 🙂

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