How to customize Weebly Background

By David Nge • Last Updated: June 13, 2022

Here's a step-by-step tutorial on how to customize your background in Weebly.

We'll go over:

You will be able to customize various background Weebly by the end of this tutorial.

Let's dive right in.

How to change background color in Weebly

Note: This section goes over how to change the background color on the main content area (a.k.a the body) of your site.

If you want to change the color of the header or the footer you have to customize the theme through the code editor (don't worry, it's not as hard as you think).


First login to your Weebly account. Make sure you select the correct website and click Edit Site.

Select the right Weebly site to edit
Select the right Weebly site to edit

In the main editor, click on the edges of a section to update its background color.

Click on the edges to bring up the edit background setting
Click on the edges to bring up the edit background setting

You should see a pop up that prompts you to edit the background, select Edit Background.

Select Edit Background to change color
Select Edit Background to change color

Next, select Change Color.

Change color setting in Weebly background
Change color setting in Weebly background

You can then drag the color picker to change the background color of your choice. Optionally you can edit the HEX code right under the color picker.

Drag the color picker to choose your color preference
Drag the color picker to choose your color preference

That's it!

You've now successfully changed the background color. You may repeat this  step for any section on the page.

Updated background color
Updated background color

First, head to your website Theme and select Edit HTML/CSS.

Head over to the code editor
Head over to the code editor

Important: Make a note whether your website is currently using the light or dark theme, this will affect how you update your header.

Check if your website is using the light or dark theme
Check if your website is using the light or dark theme

If your website is using a light theme, then click the variables_light.less file on the sidebar. If your site is using a dark theme instead, then click on variables_dark.less.

Since the website in this demo is using a light theme, we'll select the variables_light.less file.

Editing the light theme css file
Editing the light theme css file

Next is to update the color code for for the header.

Look for the first line in the code editor which should consist @bg followed by a 6-digit color code.

Update the background color setting
Update the background color setting

The existing color code is #ffffff which is white. You can change it to whichever color you like.

If you have no idea which color to choose then just use #fffa00 (yellow) for practice. Alternatively,  head to this color picker website to identify the closest color to your preference.

Update the color code for the header
Update the color code for the header

The Weebly code editor will show a preview of the color change on your header. Be sure to click SAVE to update the changes.

Save your header color change
Save your header color change

You've now successfully updated the header color!

You can also change the Footer color background.

Just look for @footer on the last line in the code editor and update the color code just like you did with the header.

You can also edit the footer color in the same file
You can also edit the footer color in the same file

How to add a background image

Adding a background image (as well as removing it) is pretty easy in Weebly.

In the main editor, click on the edges of a section to add a background image.

Click in the edge to edit the background image
Click in the edge to edit the background image

You will see a pop up that allows you to add or edit the background image.

Edit background to update background image
Edit background to update background image

If there's an existing background, the click Edit Background ➞ Replace Image.

Replace existing background image
Replace existing background image

Alternatively, if there isn't a background, you can select Image ➞ Add Image.

Upload a background image from your computer.

Upload a background image from your computer
Upload a background image from your computer

If you're looking for free stock photos or royalty free images then Pexels is a good place to start.

Once uploaded, click Save.

Save the background image changes
Save the background image changes

You've now added a background image your site! Hit the publish button to update the changes.

Publish and live the background change
Publish and live the background change