Customization Guide: How to Change Content Background Color

It is relatively simple to change the content background color. The concept is the same as changing your template background.

Depending on which DivTag template you are using, the background color image file could be either:

 

  1. contentbg.png
  2. contentbg.jpg

The difference between the two image files listed above is the file format.  One is a png (PNG image format) and the other one is jpg (JPEG image format).

Step1: Open Code Editor

To find out which image format you are using, simply go into Weebly Editor

Click here to log into your Weebly account and to open up the W Theme Editor.

NEW EDITOR

Click to Enlarge

OLD EDITOR

Click to Enlarge

Click to enlarge image for more detail

Look for either “contentbg.png” or “contentbg.jpg” on the left hand vertical column.  In the following image example, we have “contentbg.png“.

In the image above, the content background is an image call “contentbg” in the PNG format (depending on the DivTag template you are using, you my have a contentbg.JPG image file).

Click to enlarge

Step2: Replace Image File

Simply replace this image with another image with the SAME file name (contentbg) and SAME format (PNG or JPG) to alter the color, pattern and even opacity.

So if you have a content.jpg file, make sure your new content background image file is also named contentbg and is in the same image file format of JPG

 

The size of the image does not matter since the template is set to multiply the image to cover the entire content area. Nevertheless, we suggest to keep the image as small as possible to optimize loading speed.

 

You can create an image using image editor such as Photoshop Express Editor (Free). You will need to set the image to different opacity to have your background be transparent. The default opacity is 70%. You can play around with the opacity to find your perfect match.

Once you have the desired effect, save the image as “contentbg” in the PNG or JPG format (this depends on what you started with.  If you started off with a PNG image format, keep your new file in the same PNG format).

Upload the new “contentbg.png” or “contentbg.jpg” file into Weebly Editor by clicking on the “Add new file(s)” button on the left vertical menu bar in Weebly Editor – this will overwrite the existing “contentbg.png” or “contentbg.jpg” file.

Publish for the change to take place.

If you don’t see the changes immediately, try clearing your browser’s cache.