How to change navigation bar background image to transparent?

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

For solid background templates, you control the navigation background color by uploading a new image called “navbg.jpg”. If you don’t know how to change your navigation bar background, please review this tutorial first: Change Navigation Bar 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(navbg.jpg) repeat;

Here change the .jpg to .png

background: url(navbg.png) repeat;

Step2: Create your new navbg image

The size of the image does not matter since the template is set to multiply the image to cover the entire navigation 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 “navbg” in the PNG.

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


Save & Exit