How to change the drag & drop content area background transparent

If you are using a template that doesn’t come with a transparent content background, you can customize it to create a transparent background.

For solid background templates, you control the content background color by uploading a new image called “contentbg.jpg”. If you don’t know how to change your content background, please review this tutorial first: Change Content Background. 

There are two steps to change from a solid background to transparent.

Step1: Change image format

What allow you to have a transparent background is the image format. The image format you need to use is PNG. For solid background template, it use JPEG. So to adapt your template, we need to change the css so your theme can use PNG images.

In main_style.css, locate this code:

background: url(contentbg.jpg) repeat;

Here change the .jpg to .png

background: url(contentbg.png) repeat;

Step2: Create your new contentbg image

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.

Upload the new “contentbg.png” 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” file.


Save & Exit