Noob question: Optimal Header Image Width?

Hi,

I downloaded Sitely yesterday and like what I’m seeing so far. One thing that I’m very keen to know, is how to go about getting the optimal/correct size of header image?
Asking because I made a nice wide header image that fit perfectly in the main design space, yet in preview it had an ugly blank gap on either side of the graphic.

I’m going to assume that it’s just a case of generating an image that has a max pixel width?
Thanks

For a wide hero image it’s usually best to go for a width of 2500 - 3000 px. The image should also be cropped to suit the intended image height to avoid it cutting off essential parts of the image at different display widths. To avoid the risk of seeing blank areas on either side of the image, use the fill option in the style panel to force the image to fill the hero space completely For mobile and tablet layouts, you could use device-specific images as on these devices the page width fills the entire width of the screen. By doing this you create and crop hero images to better suit device screens.

1 Like

Thanks for your advice Stephie, very much appreciated.
I’ve just come from a personally infuriating run of trying to get along with Divi in Wordpress. The entire process left me cold and made me think of the good old days of using iWeb…which led to discovering Sitely, which is already proving to be a much more enjoyable and intuitive way to build sites.

2 Likes