Page Header image not responsive

[Damiaan van Vliet]

Hi team,
For some reason I cannot get the Page Header image responsive.
When I follow the instructions video I don’t see the option featured image anymore.\
So I only can have a background image and that’s not responsive.

What to do? Thanks!

GeneratePress 1.3.44

GP Premium 1.2.94

[Leo]

Hi Damiaan,

Feature image should still be there as it’s a WordPress feature.
It should be the last metabox on the right hand side.

If it’s not showing then there might be a plugin conflict, then try #1 here: https://docs.generatepress.com/article/debugging-tips/

Let me know if this helps.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

If the image is being used as a background image, you might want to do this:

.page-header-content {
    background-position: center center;
}

That will at least center the image on all devices. Thinking about adding this into the plugin by default.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Damiaan van Vliet]

@Leo thanks for reply. the normal featured image I know but in the instruction movie about the PageHeader there is a different mentioned. But anyway that is not exactly what I meant.

@Tom, thanks, adding that CSS code is almost right for me but still the image is not fully visible when resizing the screen. Because the top header image is a photo of a person it would be great it resizes completely. Hopefully that’s possible.

Thanks!

[Leo]

The code isn’t meant for re-sizing the image – background images are not responsive by nature.

I think your best bet is to specify different images if your one background image doesn’t work on multiple screen sizes. You can do it with this CSS:

@media (max-width: 768px) {
    .generate-content-header {
        background: url(my-url);
        background-size: cover;
        background-position: center center;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts