Archived topic
How to correctly size page header images?
9 replies · Started by George on April 16, 2017
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
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.
Hi Leo,
Thanks. I think I understand what I was doing wrong.
George
Glad I could help!
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
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
Hi Tom,
That's more like what I was looking for, thanks.
George
You're welcome :)
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.
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.
