Website Design Builder – Background Style

If you’re starting from scratch with a new trial, simply choose your starter template from the categories and choices available and click personalise. When you click the Background Tab at the top, you have three main options, COLOUR, SIZE and STYLE. We covered Colour in the last tutorial, which you can look at by clicking the link above. Before you check out the Colour tutorial, “Size” essentially deals with corner rounding and this only actually applies if you are using a standard colour background for your header and body. Many of the starter templates actually use Design Images to create the backgrounds and in this case corner rounding becomes redundant. However, if you do want to try out Corner rounding you can switch off the images and play around with colours instead. 

To do this, go to Colour > Header > Step 1 – untick the Switch OFF box.
And Colour > Body > Step 1 – untick the Switch OFF box  and Step 3 – Hide Foreground Image,

which then removes the background images to reveal the colour options.

You can now play with both colours and corner rounding.
 

The other option within SIZE is the depth of your header and therefore the position of the header and body images. Simply use the slider, which you’ll see up in the top left hand corner to move either the images or the colour lines up or down. This comes in handy when you are positioning images such as your logo or your header text. It’s one ofthe really flexible functions of this facility that makes it a real joy to work with!
 

To customise the template you chose using the Template Design Images provided, simply re-tick step 1 on both “header and body” and click “show” in Step 3 on “Body” to bring back the images. Now click the “STYLE” button and you will see the options available with regard to the images for Header Background, Header Foreground, Footer Image and Body Top Image.
The Header Background Image sits behind any text or images you place.
 The Header Foreground will sit in front of any images or text you place. For instance there is one template, which looks like a washing line displaying your images and the pegs sit over the top of you images to look authentic.
The Footer Image is the one at the bottom of your website, below your website content area.
The Body Top image sits at the top of the body of your website and so just above the area containing your content. This most often appears as the bottom part of the Header background image and work to pull the header and body of your website together nicely.
 

The options in STYLE allow you to choose to hide or show the Template Design Images and with the main Header Background image you can change how much you can see-through it. This is quite clever should you want to place Text over the top of the image. 
 

Once you’re happy with the colours of images for your template design, the next step is to add your own images or edit your text. We’ll look at this in the next tutorial. See you soon.
 

Find out more about us

We have been in business since 2003. Back when the founders of Facebook were still in college, we were writing code and helping our users create great websites.

Affordable business website design

If you need help, why not check out our huge selection of videos, step-by-step guides and knowledge papers.

UKs most trusted

We have helped many thousands of our customers create great looking websites. Take a look at a few examples, created using our website builder.