The following is a list of several of the more common questions that we receive regarding banner usage within the Premium Website Builder.

Before beginning with the Q & A, let's first review what specifically we are referring to by the banner. The banner is an image that shows in the top part of your website on every single page. Please see the screenshot below:
banner-location

What size should my banner be?

For the best possible fit, you should create a banner that has the same size dimensions as the included banners for that template. You can determine your banner size in this chart that goes through all of the templates. If you don't wish to try finding your banner dimensions in the table, then you can also find the size of the included banners by doing the following:
banner-size

Firefox

  1. On the "2. Design" step, choose a default banner and click "Preview"
  2. Right click on the banner and choose "View Background Image"
  3. Right click on the banner and choose "Properties"
As you can see from the screenshot, the ideal banner size will be 504px by 254px.
banner-pixel

Internet Explorer

  1. On the "2. Design" step, choose a default banner and click "Preview"
  2. Right click on the banner and choose "Save Background As..." and save the header image to your desktop
  3. Right click on the image now on your desktop and choose "Properties" and then click the "Summary" Tab.
As you can see from the screenshot, the ideal banner size will be 504px by 254px.
banner-ideal

How can I design a banner that looks like it fits with my template?

Many templates include a banner that is not simply a photo, but instead has special borders and other features.

Take for instance the following banner:
banner-features

As you can see, the default banner image is not just a picture of a a plate of food, but it also has some design features such as the light blue arcs to the far left.

In this article, let's say I would like to use the following image as my banner:
image-example

When I upload this banner and preview, you can see from this screen shot that the image is stretched and does not look ideal.
image-stretch

The steps below require that you have some experience with editing images using an application like Photoshop or Gimp. While the Technical Support Department cannot edit or create banners for you, there are many sources online that can recommend programs to use and offer assistance with using them.

The following are a few links that we found that should help:
- about.com - Top 11 Free Photo Editors for Windows
- Installing GIMP a free photo editor

The first thing you'll want to do is save one of the default banners to your desktop. To do so:

Firefox

  1. On the "2. Design" step, choose a default banner and click "Preview"
  2. Right click on the banner and choose "View Background Image"
  3. Right click on the banner and choose "Save Image As..." and save it to your desktop

Internet Explorer

  1. On the "2. Design" step, choose a default banner and click "Preview"
  2. Right click on the banner and choose "Save Background As..." and save the header image to your desktop

When we download the default banner to our desktop, it looks like this:
default-banner

Using your favorite photo editing software, clean up the image a bit so that it looks more generic, like this:
banner-generic

You can use this generic image and incorporate your banner, similar to this:
banner-combined

When you preview your page with your new banner, you'll see that you now have a much better fit:
banner-complete
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve our Support Center:
Email Address
Optional, but our team may contact you for more information.
Like this Article?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!