[Resolved] Page Hero on front page is cutoff on right

[Mark]

I have a GP site at http://ngge.michianait.net

I have created a page hero for the home page. The background image I am using is a png file. For some reason neither padding or content width (in the customizer) seem to affect the width, which is cutoff on the right hand side. I have tried both centering the image and using left align, none of which seem to make any difference.

Please advise.

Thanks,

Mark

[Mark]

Sorry, forgot to click Notify me.

[Elvin]

Hi,

You have to set the Header Element’s “Background Position” to “center center”.
https://docs.generatepress.com/article/header-element-overview/#background-image-position

With this, the cropping is visually balanced rather than being significantly cutoff to the right.

[Mark]

Elvin,

I tried that, but I was still unable to decrease the width of the image.

And the page-hero images on the the “Philosophy” and the “GMRT” pages are still way to big. Do I need to convert them from png to jpg first and shrink the images?

Mark

[Elvin]

And the page-hero images on the the “Philosophy” and the “GMRT” pages are still way to big. Do I need to convert them from png to jpg first and shrink the images?

No need to resize it. We should be able to do something about the bg image with CSS:

If you must control the size, try this:

.page-hero{
background-size: [your size here];
}

You change the background size either “contain” or of a specific percentage value of your preference.

[Mark]

Could you give me an example of background size format like 1200px x 800px, or 60 (%), etc?

Thanks
Mark

[Elvin]

I should mention that while it’s not necessary to resize the images, It is important to make the images for landscape display. Uploading a portrait oriented image will be tricky to deal with.

Could you give me an example of background size format like 1200px x 800px, or 60 (%), etc?

I’m not sure I understand what you mean. Are you asking for a demo?

Usually, the default value “cover” should be enough. Using percentage value isn’t exactly recommended because there are scenarios where the user uploads images of different aspect ratios and for busy images with non-uniform background.

Percentage value isn’t exactly applicable in your site’s case because the image orientation you use on the Philosophy page is portrait while the background image on your home page uses landscape orientation.

That said, you should stick w/ the default “cover” or set it to “contain” OR change the orientation of the images intended for page-hero to be of landscape orientation so you don’t have to do change the background-size.

[Author]

Posts