x

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

[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?

90,194 Views
Message 1 of 70
Report
1 Best Answer
Square

Best Answer

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.

View Best Answer >

90,140 Views
Message 4 of 70
Report
69 REPLIES 69

The extended widthy of my header pic is causing the text to display alarmingly differently on various devices. Or something is. The aspect ratio cannot be maintained between the size of the pic and your text block. 
This is a long way from WYSWYG.

5,401 Views
Message 68 of 70
Report
Square

Is the text an element you've added to the header section, or is it text that is actually part of the header image itself @Maenad?

5,361 Views
Message 68 of 70
Report

The text was inserted into the editable box in the theme. There are two elements provided: the Background and the Text box. I edited the text to suit, I didn't add the box itself. It is shocking how differently it displays across platforms and how the + and - adjustments don't preview changes, whether I'm working in Chrome or Firefox. 
If I knew the size, and there was a template so it would retain cross platform responsiveness, I could make my own and place logos, photos, etc, in a spot where it would display correctly, one would assume. 

5,273 Views
Message 68 of 70
Report
Square

Text will usually appear bigger on mobile devices for easier readability, although it sounds like it's not just that so much as where it's ending up positioned over your background image. That's an issue for some people because of the radically different screen ratios of a mobile device in portrait mode versus a desktop computer. If you rotate your phone so you're viewing your site in landscape you'll see that it's somewhat closer in positioning to how it is on desktop (although it won't be the same since the screen size is still smaller).

It is possible to control this somewhat with CSS overrides, although it can be tricky and you'll need to have a pretty good understanding of HTML and CSS to do it.

In my experience background images usually work best when the positioning of the text on top doesn't matter that much, that way the image can be bigger, larger, or positioned differently without it affecting things too much.

5,219 Views
Message 68 of 70
Report

Begging for the size, WEEBLY please provide the best dimensions for a responsibe header. Show a template with space for a logo or text that will display correctly. Many of us would like to create a custom header, size please please please.

5,212 Views
Message 70 of 70
Report

None of this makes any sense! Why is there a banner on the page at all if the only way to update is to constantly guess at the correct size....and then watch as it incomprehensively zooms on the image until it's illegible. Every time. Wild. 

4,358 Views
Message 70 of 70
Report

I'm sorry, I used the wrong term. The main banner. I keep guessing, keep getting it wrong, and can't find out how in Square to resize it to make it work.I'm using Section Height XL.

What are the dimensions? I cannot find them ANYWHERE. Man that'd be helpful

2,380 Views
Message 71 of 70
Report
This thread has been archived and locked. Please start a new thread if you would like to continue the conversation.