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

Home Forums Support [Resolved] Page Hero on front page is cutoff on right

Home Forums Support Page Hero on front page is cutoff on right

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1550669
    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

    #1550670
    Mark

    Sorry, forgot to click Notify me.

    #1550835
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1550837
    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

    #1550888
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1550914
    Mark

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

    Thanks
    Mark

    #1550937
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

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