LWD logoLori's Web DesignLWD logo

How to Design Semi-Transparent Background Images with CSS in 5 Steps


This CSS tip provides information on how to make a semi-transparent background image and place it over another image like a banner, or other image on your website. This can be done with most graphic programs that allow you to save transparent images in png format. I'm using Fireworks CS5 but these instructions should also work in Photoshop.

holiday sale with opaque transparency over banner
A banner with semi-transparent message overlaid on top.

Step 1.   Adjust image color and size:

The first step is to set up an image of the desired size and color that will be laid over the banner or photo. You don't want to cover the whole banner so choose a size that will leave enough space on all sides for part of the banner to show through.

Step 2.   Add Semi-Transparency

Now you need to apply transparency (semi-opacity) to the image. With the background image open, click on it so it's highlighted, then in the properties box, adjust the transparency to about 75%. This will allow some of the background to show through once this image is placed over the banner. Save it in png format or semi-transparency may not work.

The image shown below hasn't been placed over the banner yet, and the background on this page is white, so you can't see the transparency at this point. I added a border and dropshadow for emphasis while it's on this page but this won't be applied to the actual image unless you choose to do so:

opacity added to an image

Step 3.   Add Text and Save

Now add text to the background image using the text tool. Adjust the font, colors and size of text in different sections of the text to add interest. Save it in a different name than the banner if you want to remove it from the banner later.

text added

Step 4.   Float the Image Over the Banner with CSS and HTML

You could save the banner and background image as one image, however if you want to apply the transparency temporarily, like a temporary sales notice that floats over your banner, so it can be removed easily, then use the following instructions.

Before you start this step you may want to save the original code for your banner so it will be easy to revert to the original image by just replacing the original code.

In order to position an image so it is static on the page (doesn't move around on the page when browser window size changes), we need to set up the container that holds the image as "position: relative" and then use "position:absolute" on the div that contains the background image.

On the web page set up a div that is positioned where you want it and add "position:relative" to that div. Then add the coding for the banner image. Before closing that div, add another div with "position:absolute" so you can position the image within the banner, adding dimensions from the top or left side to suit your needs. Then close both divs. Following is the HTML for the image being used in this example:

The following HTML is for those who prefer inline styles (see coding below for using a CSS file)

<div style="text-align:center;position:relative;">
<img src="images/ULR FOR YOUR BANNER GOES HERE.jpg" width="800" height="100" border="0" alt="banner">
<div style="position:absolute; top:10px; left:20%;">
<img src="images/URL FOR YOUR TEMPORARY SALE GOES HERE.jpg" width="500px" height="80px" alt="Sale">
</div></div>

If you know how to set up a CSS file you can reduce code on the web page and add all formatting in css instead, by setting up a new entry in your css file for the 2 divs as follows. Lable the outside div "temp sale" and the inside div "temp sale text" (name yours whatever you want). Adjust positioning for your needs

Css File Code:

.tempsale {text-align:center; position:relative;}
.tempsaletext {positon:absolute; top:10px; left:20%; }

HTML Code:

<div class="tempsale" >
<img src="FOLDER WHERE YOU STORE YOUR GRAPHICS/ULR FOR YOUR BANNER GOES HERE.jpg" width="800" height="100" border="0" alt="banner">
<div class="tempsaletext">
<img src="FOLDER WHERE YOU STORE YOUR GRAPHICS/URL FOR YOUR TEMPORARY SALE GOES HERE.jpg" width="500px" height="80px" alt="Sale">
</div></div>

The finished banner, with background image floating over it, shown below, was about 800 pixels wide which left about 150 pixels showing on each side of the banner

holiday sale written over banner

Step 5.   Make the New Image Responsive for Mobile Devices

If you are designing this to go on a mobile website, leave out the width and height measurements in the img tag and be sure and add the following code to your CSS file so the image will adjust according to the size of the mobile device:

img {border:0; max-width:100%; height:auto;}

Other Semi-Transparent Background Ideas

US flag with partially opaque rounded rectangle over it, with labor day sale notice written on top.

This image of a US flag has a rounded rectangle overlaid above it with a semi-opaque background. Text was printed on top of it. A drop shadow was applied to both the image and the rounded rectangle using CSS.




Lori Eldridge
Copyright © 11-24-14 - updated 10-13-18
All Rights Reserved

Twitter     Facebook