LWD logoLori's Web DesignLWD logo

How to Design a Semi-transparent Background over Another Image with CSS


This CSS tip provides information on how to overlay a semi-transparent background image over the main banner, or another 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.

Following is a banner overlaid with a semi-transparent background image:

holiday sale with transparent background over banner

Step 1. Adjust color and size:

The first step is to set up a background image of the desired size and color that will be laid over the banner or photo. You don't want to cover the whole image 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 the Background Image

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

The background image 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 on this page but this won't be applied to the actual image unless you choose to do so:

semi transparent background image

Step 3. Add Text to your Background Image 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 this background image in a different name than the banner if you want to remove it from the banner later.

semi-transparent image with text added

Step 4. Float the background 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 background temporarily, like a temporary sales notice that floats over your banner, that 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 on the page with 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 so it doesn't move around.

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 background 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).

Css File

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


Adjust positioning for your needs

HTML

<div class="tempsale" >
<img src="images/ULR FOR YOUR BANNER GOES HERE.jpg" width="800" height="100" border="0" alt="banner">
<div class="tempsaletext">
<img src="images/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 on each side of the background image

holiday sale with transparent background over banner

Other Semi-Transparent Background Ideas

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


Google


Lori Eldridge
Copyright © 11-24-14
All Rights Reserved

Twitter     Google+     Facebook     linked in