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

[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!

[Tom]

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;
}

[Suggie]

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

[Tom]

Awesome, you’re welcome! 🙂

[Author]

Posts