Header Image Size

[ca11]

Hi! When I upload a new image as a Tall Header, Weebly automatically zooms in on a section of the image. Is there a recommended size? Tried finding an answer, but nothing I found in the help forums helped.

Thanks,

C

[Bernadette3]

Are you seeing the zoom in the editor? Or mobile or desktop view? Can you also post a link to your site so the community can take a look as well?

[ca11]

The zoom is visible in the editor and live sites. The image appears normal, but it is actually a cropped version of the image I uploaded.

tailoredtouches.com 

[Adam7]

Cropping of header images is normal depending on the size of the image vs the general dimensions of the header area. I think your image looks great, although I don't know what the original looks like to compare.

[helenay]

What are the typical dimensions in pixels or inches, or tall header size, and shorter header size? I want to edit my image in photoshop to fit the header correctly so I can make the text in my image correctly. Can someone please state what those dimensions are? 

I've looked up so many of these and there was never a consensus to the header dimensions. 

[Bernadette3]

It's hard to give an exact answer because the images will resize depending on the device you are on. Also, it sounds like you may be on an older theme, but we can take a look and see if we can get you pointed in the right direction. Can you post a link to your site? 

[Maenad]

Why is there not a recommended size to fit a liquid header? Why can't I "reduce" but only see a control to "zoom"? My 800 px wide picture is unable to be cropped, or moved, or reduced to fit. 

[Adam7]

Normally for header images you want something larger than 800 pixels; it's not uncommon for the header area of a site to be 1000px or more on a laptop screen, and sometimes higher on larger monitors.

[Lindi]

I want to download an istock photo for my template background header image. What is the best size to download so the picture fits into the template area and displays the full picture.

The image options I have for download are as follows:

Medium: 1256 x 838 px (4.19 x 2.79 in.) - 300 dpi - RGB

Large: 2122 x 1416 px (7.07 x 4.72 in.) - 300 dpi - RGB

X-Large: 4570 x 3050 px (15.23 x 10.17 in.) - 300 dpi - RGB

Small: 726 x 484 px (10.08 x 6.72 in.) - 72 dpi - RGB

I appreciate the help. thank you

[Adam7]

Are you forced to pick just one of those, @Lindi? Otherwise I would download all four and try each to see which works best with this particular image and your site.

[Lindi]

I'll check with istock. I assumed I would be paying for only one download and had to pick one of the sizes offered.  

Thank you.

[MyMoonMalas]

IDK how old this is but I found this tutorial on how to prevent auto cropping, hope it helps someone. Thanks for this feed! 

https://www.youtube.com/watch?v=hW5ANkxmMuE

[askccf]

Hi, looking at your website now and wondering if you found the answer to your header question? I'm viewing from a laptop and my iphone, and it looks really good. I would be thrilled to have our site look as good as yours. Wondering, which template design you're using? And, what image size you ulimately uploaded?

Many thanks for any tips you could give!

-britt

askccf.org

[songjockey]

Need some help here, please.

I am using the Short Header, which when I inspect the HTML, it says it is 150px high. When I create an image 150px high, the imported image is only the top half of my image. If i go ahead and allow it to upload, the image it is the same area previewed, but grossly pixelated. 

If I make it larger, it is still unfavorabley cropped, and clear.

What is the magic? I have been all over the forum, and spinning my wheels trying different things. Is it a proportion issue? If so, what is the height-to-width proportion?

[songjockey]

Found it....so for Short Header, the proportion width should be 6.5 times the height. The HTML says the heght is 150px, so simple math dictates 975px wide, 150px high.

So much work. This is what support folks needed to communicate. For those wanting tall headers, good luck. I am not using them, so I am not willing to continue to spin cycles on this issue. I have a website to update. 

Good luck everyone!

[Bernadette3]

Thanks so much for sharing @songjockey Apologies for any frustration!

[Hillsgirly]

Thank you! Have have the same issue and its really frustrating!

[Nekodragon]

Hello,

I was looking for the solution for this problem as well and I think that I may have found it. If you go into the editor and click on 'themes', then click on 'Edit html/css', you will see a list of different things. Under 'Assets' there should be some files that say things like 'banner-short.jpg'. If you click on those it shows the image pixel dimensions for the default header.

I am using the banner 'Pen and Ink'; you might want to check your theme as I did above.

For 'Pen and Ink' short banners are 960 x 183. For tall banners it's 960 x 280.

Hope this helps!

=^..^=

[susi6]

What about resolution? I've always heard 92dpi or 72dpi but when I do it looks horrible. 

[Bernadette3]

72 dpi is correct, @susi6. What is wrong with the image when you upload?