What is the best size of image for my banner header background images?

[brownestone]

[Note: The title of this post has been edited by a moderator.]

If I want to create a header image where do I find the header sizes so that I can create the right sized banner header?

[Queso]

Welcome!

If you're looking to size the header, the options will vary depending on the theme. Some themes right now will have the Header option in the Pages menu, by clicking the page itself there.

If there isn't an option for a Tall or Short Header there, then you're likely using a Sections-enabled theme, which will let you just click the header, then click the bottom border to size it however you like.

[KL10]

Is there a way to actually re-size the photo though?  When I click on the bottom border to resize the header, it just resizes the space used, thus cutting off the bottom of my picture.  How can I make the picture itself smaller?  Thank you.

[Adam7 · Accepted solution]

Generally speaking, images that are 2000 pixels wide and 1000 pixels high work best for header or section background images, although it varies depending on how much content you've added to the section and what the actual content of your image is.

Section and Header areas are designed so that the image will automatically fill the entire area.  Sometimes you might need to edit your image to add more negative space around the edges to make the image appear smaller (in situations where you want a specific part of the image to always show).  It also might be possible to do it through theme customization if you're familiar with CSS and HTML.

[Content_creator]

I find trying to size the header photos for the new webpages a nightmare. There is a long lean space for the photos and none of the stock and other images I have tried to use fits the space. What I need is an exact size and a recommended dpi so I can edit the pics in Photoshop first and then put the precise size pic needed in the header. I have spent hours trying to figure this out without success. 

Surely it would be easy to have an information box coming up in the header field giving:

1) Precise dimensions of image needed

2) DPI.

The very limited information given has made it impossible to update my website to one of the new templates. Each design should also have a brief description e.g. two column layout, single header photograph etc.

[Adam7]

There isn't really a set size since headers can be different for each theme, and can also be adjusted if they're flexible headers.  Generall speaking, though, the best images should be about 2,000 pixels wide and at least 1,000 pixels high.  Since this is for web use, your images should be 72 DPI.

[beinspired]

Thank you for giving us an approximate size to start with--especially width! As a solopreneur, even basic guidelines like this save me a lot of time when I want to place text on the image!

[rlemos]

It would be REALLY nice if somehow in the header selection process we could tell if a specific header was adjustable..... The whole "guessing" business is nuts! Maybe I am overlooking something..... if so, please advise. With the header I chose, the height adjustment feature appears but is not functional.... and I can't tell you which header it is because it isn't labeled anywhere that I can see..... Seriously, this whole header thing leaves something to be desired.....

[Queso]

Hello rlemos! Header functions have changed significantly since this post was first made, so you may be seeing some different things than one would here. When was the last time your theme was updated?

[LittleLo]

Good evening Queso!

I am still finding my jpeg images are never the proper size when attempting to upload for my site. Would you be so kind as to offer some better tips/guidance on what the size the jpeg images need to be for background.

Thank you in advance!

Jared 

[Queso]

Hello Jared! Sizing images just right can be tricky. A lot of the backgrounds on modern themes depend heavily on the size of the viewing window. What sort of situation are you seeing on your site? I'll be glad to help how I can to get the images showing properly for you.

[SabellaFarms]

I am really hoping someone who can help me sees this comment. I have a website www.sabellafarms.co.nz and ALL of the main banner pages on each page is cut off. I have now spent about 10 hours pulling my hair out resizing images to try and make the bloody things fit into the banner. 

Is there someone who can have a look and tell me what to do to fix it as right now its a mess. I have no idea what the theme is on my website and I don't know what else to do to fix this issue. It should not be this hard to get a general image to fit in the main header without cutting it off.

Can someone PLEASE help me! I'm in tears and don't know what else to do!!

Erin

[Adam7]

Thank you for joining the Community and making your first post, @SabellaFarms. Welcome!

@PaulMathews, do you think this is something that can be changed broadly with a CSS override? Seems like it would be somewhat tricky to prevent cropping the background in an attractive way on all devices, but not impossible.

[PaulMathews]

@Adam @SabellaFarms 

This is a pretty long thread. The issue here with pretty much all of the individuals who've posted some level of frustration with the banner background image is that they simply don't understand the purpose or behavior of a section background image (and this applies to every site content management system not just Weebly).

@SabellaFarms essentially wants her full, uncropped banner image expressed within a full-width section regardless of the image aspect ratio, (fixed) height of the section, or width of the viewing screen (particularly small mobile screens). Well, that's just not how background images work for the obvious reason that different screen sizes will necessitate a proportional change in the height of a background image if the image aspect ratio (the ratio of the image's width to its height) never changes. So, when presented on a smaller screen, that image will shrink both horizontally and vertically (everything shrinks) - which is standard responsive image behavior but NOT how a background image works. If she wants the image to behave in a fully-responsive way then she'll simply have to remove the banner image (maybe change the background to a fixed color instead), drag an image element into the banner section, and load it with her dogs and horses banner image. What she'll now have is an actual, fully-responsive image within the section that will always display the whole image regardless of screen size. It won't stretch from one end of the screen to the other but it will have the "let me see everything in the image all the time" behavior. Normally, you wouldn't use a (foreground) image as a banner since (a) it doesn't span the entire screen width; (b) you wouldn't be easily able to overlay a caption on it (but since her caption is actually part of the graphic itself, that's not an issue); and (c) even if you were able to code a true text overlaid caption on the image, on smaller mobile screens, because the image will be much smaller, you'll have to shrink the font size to fit the now much smaller image or you'll just have to suffer truncation of your overlaid text.

This is a case of "be careful what you wish for." As a regular (not background) image, you'll always see the full image regardless of screen size but, on small mobile screens, EVERYTHING will get smaller and that includes the lettering that is part of her banner graphic. At smaller screen sizes, that lettering will be too small to be easily legible (that's why you generally don't add lettering to graphic images and never add it to background images).

@Adam, yes, there is potentially a way to override section background image behavior which in Weebly is (correctly) set with a background-size attribute of "cover." This means that the image intelligently maintains a fixed height on smaller screens necessitating the horizontal cropping that has all of these users up in arms. This is standard background image behavior (not just on Weebly but EVERYWHERE) that allows the section to accommodate actual banner overlay text and other content. Instead of having the background-size as "cover", you'd change it to "contain" which would ensure that the background image would always fully display regardless of screen width. The problem? The height of the background image would shrink exactly like a responsive image and that'd leave you with big empty gaps above and below the image (because the containing section will maintain its height even though the background image won't).

I'd never advise anyone to code a section background image with a background-size attribute of "contain" because it's simply the wrong way to handle a banner image. Ultimately, @Adam, there isn't really a way to justify the background image behavior to novices because they only think of their site from a desktop screen size perspective. They don't have a comprehension of mobile behavior and likely don't even check their site on mobile as they build it. Weebly is doing the right thing here. If the user wants a fully-responsive image in the banner then that's what she should use. It's not the same as a background image but it will give her the behavior she wants. It's incorrect but there you go.

[makingamark]

Maybe you're not familiar with the need to make images compatible with making the site speedy in order to rank well 'n Google!
Images simply do NOT need to be that large in terms of pixels.

[TeriGriffin]

I am having the same issue, did you ever resolve this?

[Queso]

Hello TeriGriffin! There have been some changes since the initial post was made. What issues are you encountering currently?

[tommyboy35987]

I'm with the guy that commented that these banners are an absolute NIGHTMARE! It used to be that you had a box and you could fill it as you wished with what you wanted in your banner. Now I'm playing a constant guess and check game and I can never get the banner to look exactly how I want. There have been a lot of changes on weebly, some good, but this one is horrendous. Please go back to the old way that banners used to be created, or at least give me the option. I've wasted so much time on formatting banners I've already made and it's incredibly frustrating.

[LittleLo]

I am feeling your pain as well right now. All my jpeg images are never the proper size when attempting to upload for my site. Have you received any better tips/guidance on the size jpeg images need to be for background theme?
Thank you in advance!
Jared

[TamiekaS]

I'm having the same problem.  I uploaded an image as a header but on mobil have the image is missing and the text is across the face.  I recently uploaded my theme.  This is problematic!

[Adam7]

Did you get your theme from a third party theme maker, @TamiekaS? You might want to contact them so they can take a look if your header image isn't showing how you expect.