We've taken an existing Weebly template and made the background blue. You can see that the banner at the top works independently to the rest of the background.

What if you don't want your banner to be a big rectangle at the top? You don't have to be constrained by that design aesthetic, although it is a neat and common choice for many business owners.

When creating the image that you want to place in your banner, remember if it doesn't have a background, and you want to retain the transparency, you need to create it as a PNG file.

When you are ready to start making your changes, click on the Edit Image button. This will open the banner editor and bring up a toolbar with your editing tools.

Here is where you can make changes to any image by changing its opacity, or rotating it. Have a play around and you will see that you have plenty of options to work with. 

You an also add more images or text with the buttons on the left. Images and text boxes can easily be dragged and moved around, and layered on top of each other. 

So, you've clicked Edit Image, and you're in the editable banner area. To get rid of the default image in the template, simply click the cross in the corner. You are left with a blank area to insert your own, newly created image.

We insert our dummy logo, but as you can see, the white rectangle is still sitting there on the banner.

The secret here is to change the colour of the background. When you are in the banner editor, and you have inserted your new image, take a look at the toolbar. It changes again, to give you the option to make edits to the background colour and opacity.

We selected a transparent background, and we're done. Have a play around with the tools here, as you can change not only the colour, but also add gradients or patterns. Using these options could really start bringing your website design to life, or at least give you a starting point to add your own style and stamp onto the design.

If you would like some help with your website design, we work with clients across many platforms including design for Weebly websites. 

We're going to use one of the pre-defined Weebly templates as our example to work on. Click on the Design tab and then click on Edit HTML/CSS.

You will see a screen displaying all the HTML and CSS code that is driving your website template. Don't worry if you don't understand how it all looks, we will only be interested in changing a couple of small things to update your website background.

Click on the Add new file button and browse to the image that you want to use as your background. For our example, we've named our image "new-background.jpg" 

The editor will put your image into the existing list in alphabetical order. If you click on it, you will then get a preview of the image, as well as the option to rename or even delete it. 

We've gone with some striking polka dots to make sure you can see the difference!

This is the bit you may find scary, but don't be. It's really very easy!

Go back to the main-style.css section and scroll through the code until you find a body { } tag. The templates are all set up slightly differently, and so the code is not identical from one to the next. However, what you are looking for will look something like this:

body {
  background-color: #301515 
  background: url(body-bg-red.png);
  font-family: Lato, Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #666666;
  margin: 0;
  padding: 0 0 50px;
}

The part that interests us is the background url element. Simply replace the name of your new image file and it will update the background of your entire website. So, for our example, we have changed the code to read:

  background: url(new-background.jpg);

And now our site has polkadots as the background!

One last thing to bear in mind is the size of the image you upload. If you want 1 single image across the entire background of your site, make sure you size it correctly for the website. 

The background image size should be a maximum of 481px by 320px.  A smaller image size would also work, but you might have to experiment to get it just right.

If you do use a smaller image, and you want it to repeat across the background (which is what we have done with our polka dots up there), then you just need to add repeat or no-repeat to the code.

background: url(body-bg-red.png) repeat;   - this will repeat your image as a pattern across the background.
background: url(body-bg-red.png) no-repeat;   - this will show just 1 instance of your background image.

The editor will have given you a preview of how your new background looks as soon as you update the code. 

If you're happy, hit the Save button in the right corner. If you think you've mucked it up, hit the Cancel button and none of your changes will have been actually applied to your website.

If you would like some help with your website design, we work with clients across many platforms including design for Weebly websites.