CSS technique: Transparent overlays

ADDING TEXT AND overlays to images was the domain of image editing software in the not-too-distant past. Users had to integrate all the necessary elements directly into the image. This worked perfectly well until any of the elements needed to be updated. The whole image would need to be recreated and replaced. Using CSS, the transparent PNG-24 file format and background image, the whole process becomes far more flexible. The first step is to create two new classes which will be applied to the two div tags that make up the technique. One of the div tags will hold the background image and a second will act as the overlay for any text.

If using Dreamweaver head to Insert>Layout Objects>Div tag and add before creating another tag to go inside the initial tag just created. Next create a new class, Format>CSS Styles>New, called holder and make sure the height and width are large enough to hold the background image. Now create another class called overlay and define the height, width and add any padding as this div will contain text. Now double-click the initial class in the CSS Panel and add the background image. Now do the same for the overlay div tag.

The background image for the overlay will need to be in the PNG-24 format with the opacity turned down to create the transparent effect. The main elements of the technique are now in place and the first job is to position the overlay so that it lines up with the background image. First add in a top margin to position the overlay. For example, if the holder tag is 500 pixels, make the top margin around 400 pixels to place the overlay near the bottom of the tag. If an image has a drop shadow the holder tag will have padding. Adjust the margins on the overlay class to perfectly place. Now add any text to the overlay and style to finish off the technique.