Semi-Transparent Backgrounds

Editing CSS background opacity

Pinned Note Transparent Backgrounds
Some templates may include opaque or "semi-transparent" backgrounds in the header, footer, menu and text areas.

See Also…

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.

Shading example

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.


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.