Semi-Transparent Backgrounds

Editing CSS background opacity

How the opacity works
The template .css file will include a style that uses a background image. The image will be one of the semi-transparent .png files in the template "picts/shading" folder.



Finding the classes that use this feature
In your .css file you can search for "picts/shading" or the following note to find all classes that use the opaque background.

/* ----- SHADE COLORS LOOK IN THE "picts/shading" FOLDER FOR MORE COLORS */

Changing the shade color or opacity
To alter any shading opacity amount or color, edit the style class "background-image:" in your .css file with one of the available images located in the "picts/shading" folder.

Example: Edit the background by changing the following highlighted code:

background-image: url("picts/shading/shade-black-50.png");

"shade-black-50.png" means that the image is a black background with 50% opacity shading.

Look in the "picts/shading" folder and you will see a "shade-black-50.png" in that folder. Change "shade-black-50.png" in the css file to any other image in the folder.

Important: You can only use images located in the "picts/shading" folder.

Creating your own shade colors
In the extras folder is a "shading.PSD". You can use this file to create your own semi-transparent backgrounds.