Transparent Backgrounds

Posted by Jeremy Edgell on October 6th, 2009

Tags: css, transparent, background

Over and over again, I find myself needing to put text over an image for some reason or another. (Darned designers and their good ideas!)  Recently, I decided to fake it and just cut the image from a designer's PSD and use an image map. I know, I know; I'm bad. It was the quickest way I could think of to get this task done, until the customer wanted different wording and I couldn't track down the PSD.

After searching Google endlessly for things like "transparent background css", "background css transparency" and the like, I decided to just break down and do the thing on my own. Don't get me wrong, I did get a few good ideas along the way, but nothing that made me think, boy, that's a good one. Especially because the majority of the methods I found relied on PNG transparencies and I just don't want to even think about the three holdover IE6 users who would complain to the customer that they don't see the same thing on their work computers as they do on their home computers.

Again, I repeat, JS and PNG and IE htc hackery are not necessary to accomplish this task! (Although, for the fun of it, a little IE CSS hackery is thrown in!)

In a nutshell, here's what I came up with. Elegant? Perhaps not the most elegant, but effective and works in the browsers I've tested (FF3, IE7 & 8, Chrome and Safari 3 & 4; you know, the *important* browsers...).

The HTML:

   <div id="backgroundImage">
    <div id="transparentBackground">
    &nbsp;
    </div>
    <div id="textOverBackground">
        Some Text
    </div>
  </div>

The CSS:

      #backgroundImage{
	background-image: url(path/to/image.jpg)
        /*have to set a height & width*/
	height:300px;
	width:400px;

     }
     #transparentBackground{
        filter:alpha(opacity=55); /* IE's opacity*/
        opacity:0.55; /* CSS2 Compliant browsers understand this */
	background:black none repeat scroll 0 0;
	height:50px; /* have to set a height to contain the text */
        /* set a position for the transparent background over the image */
	position:relative;
	left:0px;
	top:250px; /* picture height minus height of this element */
	width:400px; /* width to match the photo */
     }
     #textOverBackground{
	height: 50px; /* whatever floats your boat */
        width: 400px; /* whatever floats your boat */
        filter:alpha(opacity=100); /* Make IE understand that this is not transparent */
        opacity:1; /* Make CSS compliant browsers understand this is not transparent */
        position:relative;
        top: 50px; /* whatever puts the text where you need it */
        left: 0px; /* again, wherever you need the text */
     }

The Output (yes, I cheated, but for the sake of the embedded editor I'm using on this site):