How to Make a Custom Background on Weebly

by Clare Edwards

Weebly is one of the more popular free website providers, offering drag-and-drop site building tools make it easy to design and customize your own site using a selection of pre-made templates. One of the quickest ways to give your Weebly site a truly individual identity is to add a custom background image.

Prepare Your Image

Choose a large, high-resolution photograph or graphic as your background image. Small or low-resolution images can appear blocky or blurred when used as backgrounds. Use your preferred image editor to adjust the color, crop the image or add effects; alternatively, use Weebly's built-in ImagePerfect editor. Save your intended background image to your computer's hard drive in a Web-compatible format such as .png or .jpg.

Navigating to the CSS/HTML Code Editor

Log into your Weebly account and click on the Design tab. If you don't plan to code your template yourself, use one of Weebly's built-in themes or upload a pre-made theme. Choose one with a background image that you can replace. In the Design sidebar, click on the "HTML/CSS" link to go to the code editor.

Identifying the Current Background Image

The code editor page has a sidebar and two main panels. The top panel shows you the existing code for your page. The lower panel gives you a preview of your page so you can check that your changes give you the effect you want. In the sidebar, you'll find a list of all the files used by your page, including the current background image. You'll need to scroll through the code until you find a section that begins "body {" and look for the name of an image file. The image file will typically be in JPG format and may contain the letters "bg." You can check that this is the right file by scrolling down the list of files in the sidebar and then clicking on the file name.

Uploading Your Image

Click on the "Add More Files" option to browse your computer's drive for your background image. Select your image file and wait for it to upload. You should now see your image file on the list. In the code panel, delete the name of the existing background image and replace it with your own. Once the preview panel refreshes, your custom image should show up in place of the old one.

Saving Your Theme

To save your changes, click on the "Save" button at the top right of the screen. You'll be prompted to enter a new name for this theme. Choose something descriptive, such as "CustomTheme." Click the "Home" button to go back to your main dashboard, where you can make further changes to your page or put it on the Web using the Publish option.

About the Author

Clare Edwards has been providing Internet content since 1998. She has written and translated for a variety of markets: everything from technical articles to short fiction and essays on alternative spirituality. She holds a certificate of higher education in electronics and audio arts from Middlesex University.

Photo Credits

  • photo_camera Jupiterimages/Brand X Pictures/Getty Images