[Resolved] How to correctly size page header images?

Home Forums Support How to correctly size page header images?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #306653
    George

    I am really new, so I am not sure how to exactly ask this question, but here goes …

    At my website, altoplace.com, I have four pages: Home, Blog, About, and Contact.

    I have added a page header image to each one. The height of each image is 1200 pixels.
    The Home page image is 1803 pixels wide. The Blog, About, and Contact page images are 2000 pixels wide. So the hight of all four are the same, 1200 pixels.

    The problem that I am having, at least in Safari on my Mac, is that the Home page image looks “taller” than the Blog, About, and Contact images. I would like the Home page image to display the same height as the other three pages.

    I don’t understand why the Home page image does not have the same height (unless it’s related to the width being slightly less than the other three images). Is there anyway to fix this? My layout is still set at the default of 1100 pixels wide.

    Thanks,
    George

    GeneratePress 1.3.46
    GP Premium 1.2.96
    #306660
    Leo
    Staff
    Customer Support

    Hi George,

    This is just image ratio when it’s scaling down.

    The three images that are the same has original size of 2000x1200px and were scaled down to 1100x660px

    The home page coffee shop image is originally 1803x1200px and was scaled down to 1100x732px without losing it’s ratio.

    I think the easiest way to fix is to use WordPress image editor and crop it to 1100x660px when you are uploading them so they will all be the same size:
    https://en.support.wordpress.com/images/image-editing/

    Let me know if this helps.

    #306671
    George

    Hi Leo,

    Thanks. I think I understand what I was doing wrong.

    George

    #306678
    Leo
    Staff
    Customer Support
    #311525
    George

    I have changed the look of my site, Altoplace, which leads me to another page header image size question.

    I successfully added a background Header image, but I was wondering what is the optimal background header image size? 1100 x ??

    The current image that I am using is just one that I had laying around, 1200 x 313. I am only seeing about the top 1/3 of the original uploaded image.

    I have software on my Mac to crop the image–I was just wondering what size to use, so that the entire cropped image is displayed?

    Thanks,
    George

    #311595
    Tom
    Lead Developer
    Lead Developer

    Hi George,

    Hard to give an exact number as it has to do with screen resolution/width.

    The best thing you can do is set the background size to “Cover”, then add this into the position text field:

    center center

    #311615
    George

    Hi Tom,

    That’s more like what I was looking for, thanks.

    George

    #311798
    Tom
    Lead Developer
    Lead Developer
    #327303
    Sonya

    How do you “set the background size to cover”? I also do not see a position text field. Am I looking in the wrong place? I am having a great deal of difficulty getting header images to fit the page. The image resizing option in the header box only seems to make them too narrow but does not affect the depth. Is it possible to pad and center the header or featured images so that they do not bleed off off the page? Thanks.

    #327325
    Leo
    Staff
    Customer Support

    Hi there,

    Are you able to provide a link to your site so I can see what’s the current problem?

    The demo video on this page might help to get what you want as well: https://docs.generatepress.com/article/page-header-overview/

    Let me know.

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