How to Design A Semi-Transparent Background Image with CSS

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 a half transparent image in png format. I'm using Fireworks CS5 but these instructions should also work in Photoshop.

If you just want to made a Semi-Transparent Background with CSS, without using an image, scroll to the bottom of this page.

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 To background Image

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 sem-transparent 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 Semi-Transparent Image Over the Banner with CSS and HTML

You could save the banner and semi-transparent 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 a semi-transparent 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" 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">

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 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" 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">

The finished banner, with the half-transparent 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 Image Ideas

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

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

This sample is for a banner on a website that has an address in upper right corner. The address moves to the center of the page, with a semi-transparent background, when a tablet or small mobile device is being used.

To make a Semi-Transparent Background with CSS and Opacity in HTML

Opacity is often used on the background color of drop-down menus, so part of the banner or other features show through slightly. An opacity of 1.5 will give you 50% opacity. From there raise or lower the number until it has the affect you desire.

If you want the opacity to be applied to the whole site then set up a class for opacity in your CSS file, like this:

.opacity: 1.5;

And then apply it to a div or other element like this:

<div class="opacity">

If you are only going to add opacity to a few items then add a style tag to whatever you want to be more opaque like this:

<style="opacity:1.5">Text or background data goes here</style>

Lori Eldridge
Copyright © 11-24-2014 - updated12-27-20
All Rights Reserved