One of the features of the Premium Web Builder is the ability to upload any image to be the banner of your website.  We discussed in a previous section how to change your banner, however in this section we will cover in more detail how to make a custom banner image fit your template.

What Size should the Banner Be?

Each template in the Premium Web Builder has a different banner which means the banner size can be different.  First, select the template that you want to use in the Design section of the Premium Web Builder.  Throughout this section we will use the template xet-06 as an example, which can be found in the "Games" Category. Once you have selected your template, we will need to find the size of the default banner so we can make our custom image is the same size.  To find the size of the default banner image, click on the "Preview" button on the bottom right side of the page:

We'll go through how to do this in two popular browsers. First we will go over how to find the size in Firefox.  Right click on the banner of the Preview page and click "View Background Image."  This will show just the banner of the template:

Now that you have just the banner showing, right click on the image and select "View Image Info."  The following box will appear:

The area next to "Dimensions" shows the exact size of the banner (width X height).  Write this down for future reference when you are ready to re-size your image.

In Internet Explorer, once you have previewed the image, you will want to save the image to your desktop.  To save the image, right click on the Image and select "Save Image As."  Once the image is saved, locate it on your computer and right click on the image.  Select "Properties" and under Details find the Dimensions:

Now that you have the size of the banner, when you add your custom banner you can match the size to make sure the image fits perfectly.

Trouble Viewing Image Information?

If you have any trouble viewing the image information through one of the above methods, there is an alternative method for viewing images in Firefox. Select Tools from the menu bar in Firefox and then choose Page Info. In the pop-up that appears, click on the Media icon. This will show you a list of media elements on the page including the URL and dimensions. A preview of the element is shown in the lower part of the window. You can click on each media element until you locate the header image.

How can I design my banner to fit the template?

To make the image appear just right on your website, you will need to re-size the image.  If the image is not re-sized, then it might stretch the image or only show part of an image.  For this example, we are going to want to use part of this image for our website:

The banner for this template is 629 X 179 as we discovered above, but as you can see the image is much bigger then that and is not the same size.  If I upload the image as it current is and use it as my banner, it will look like this:

Preferably, I would like the dragon's head to be in the banner.  So in my photo editing software (I used GIMP, which is free photo editor) I cropped the image to the exact size of the banner, focusing around the dragon's head.  Once I was done, I re-uploaded the image and now the image is centered how I want it:

In GIMP (or your preferred image editing software) you can also edit the image so that it will blend in better with the template.  Since the template I am using has green and brown, I changed the color of the image so that it matches better:

Following the steps in our changing the banner article, I uploaded my custom image to be used for the banner. Just add a little content and my new website is ready to be published: