How To Chnage Background Color In Weebly

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

We'll go over:

How to change the background color
How to change the header and footer color
How to add a background image

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

Let's dive correct in.

How to change groundwork color in Weebly

Note: This department goes over how to change the background color on the main content area (a.thousand.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'south non equally difficult every bit you recollect).

First login to your Weebly business relationship . Brand certain you select the right website and click Edit Site.

In the master editor, click on the edges of a department to update its groundwork colour.

Click on the edges to bring up the edit background setting

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

Next, select Change Colour.

Change color setting in Weebly background — Change color setting in Weebly groundwork

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

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

That's information technology!

You've now successfully changed the background color. Y'all may repeat this pace for any department on the page.

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

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

Check if your website is using the light or dark theme — Check if your website is using the low-cal or dark theme

If your website is using a low-cal theme, and then click the variables_light.less file on the sidebar. If your site is using a nighttime theme instead, and so 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 low-cal theme css file

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

Look for the outset line in the code editor which should consist @bg followed by a six-digit color lawmaking.

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

If you lot accept no idea which color to cull and then but use #fffa00 (yellow) for practise. Alternatively, head to this color picker website to identify the closest color to your preference.

Update the color code for the header — Update the colour lawmaking for the header

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

Save your header color change — Save your header colour change

You lot've now successfully updated the header colour!

You tin as well modify the Footer colour background.

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

You can also edit the footer color in the same file — Y'all can likewise edit the footer color in the same file

How to add a background image

Adding a background prototype (besides as removing information technology) is pretty piece of cake in Weebly.

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

Click in the edge to edit the background image

You will see a pop upwardly that allows you to add or edit the background prototype.

Edit background to update background image — Edit background to update background epitome

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

Replace existing background image — Supervene upon existing background paradigm

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

Upload a background paradigm from your figurer.

Upload a background image from your computer — Upload a background epitome from your figurer

If yous're looking for gratis stock photos or royalty free images then Pexels is a good place to kickoff.

Once uploaded, click Save.

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

Publish and live the background change — Publish and alive the groundwork change

Wix vs Weebly vs Squarespace vs Wordpress (A detailed comparison)
How to change font in Weebly
How to delete a Weebly site
How to create a sub page in Weebly
How to add Google Analytics to Weebly