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:

banner2

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:

banner3

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

banner4

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:

bannerIE

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.

firefox-tools-page-info-media

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:

fantasy

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:

banner7

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:

banner8

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:

banner9

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:

banner10

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 Help Center:
Email Address
Optional, but our team may contact you for more information.
Did you find this article helpful?

Comments

2012-05-21 5:03 pm
I have been using these instructions to the letter and still can't get it to work for me. Getting tire of not being able to customize the banner and not having my website ready. Can anyone help me? My problem is that when I follow these instructions it only provides me with the info for half of the picture, and when I upload my picture you can still see the other half of the original picture and I don't know how to remove it or change it...this is so frustrating. I need something where I can just drag the picture...
9,413 Points
2012-05-21 6:00 pm
arnelc
Staff
Hello Pancho,

I can understand the frustration. Unfortunately, there is no way to just drag the picture. However, the banner can be edited, you just need to work with the actual files that are being published and then change them to match your needs. Some of the templates (like this one) break-up the images so that when a website is showing on a 24" screen, the website can stretch out and the banner area "stretches" without a break in the look. In order to this, the makers of the template broke up the graphic in several pieces. When your Builder site is published, the files are placed in the IMAGES folder. In order to FULLY modify the banner, you will need to obtain those files, and then modify them match the banner image that you want to use. Firefox does a great job of listing these files for you. If you're using Firefox, you cannot only get a list of the files you need to change, but you can also determine the size of the files that you will be working with. To see this list, you simply open the website page, right click on the page and then go to VIEW PAGE INFO. This will give you a menu option of MEDIA. When you click on it,you get a list of ALL the graphics on the page. It will also PREVIEW the graphic for you, so you know what it is. If you do this, you can quickly determine which files you need to edit in order to fully change the banner. IMPORTANT NOTE: This is all done OUTSIDE of the Builder tool. Not in it. Therefore, once you begin to make changes to the graphics, you should be sure to save the files somewhere NOT within the same folder. That way, if you should need to re-publish the website, you can change the graphics once again by copying the files over. Re-publishing with the Builder will overwrite the changes that you make with the banner.

You will also need a graphics tool - like Adobe Photoshop or something else that can manipulate graphic files so that you can make the banner look seamless when changed. There are free alternatives if you do not have a graphic program on hand. I'm going to list the steps to get all of the files that you need to edit:

1) Login to Cpanel administrator
2) Go to the File Manager (select Home Directory, then select GO); you can also use FTP if have access to an FTP client.

3) download the files that you need to edit from the IMAGES folder

4) Alter them to the image you want to use.

5) After the alterations are finished and save, upload them back to the server. Make sure that NONE OF THE NAMES for the files have changed!

Your custom banner will then be available for your website. You will need to clear cache in order see the edited banner.

If you require further instruction on this issue, please either contact Technical support or post another comment at the bottom of the page.

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!

Help Center Search

Current Customers

Email: support@WebHostingHub.com Ticket: Submit a Support Ticket
Call: 877-595-4HUB (4482)
757-416-6627 (Intl.)
Chat: Click To Chat Now

Ask the Community

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

Not a Customer?

Get web hosting from a company that is here to help.