Archived topic
Page Header image not responsive
4 replies · Started by Damiaan van Vliet on February 6, 2017
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!
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.
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.
@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!
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/