How to Automatically Create Transparent Overlays on Images with JavaScript

When you want to place text on top of an image you need to either choose an image that has a large area of mostly the same color to work as the background for the text or you need to overlay the image with a transparent layer that will then act as the background for the text. Here we choose the second option and describe a simple JavaScript function that will apply the extra mark-up needed automatically.

How to Create the Transparent Overlay

Sara Flemming describes a technique involving an extra div element that will prevent the transparency from being applied to the text elements contained by the wrapper element.

Basically, the trick is to add an empty div before the text elements and apply the transparency to the extra empty div. That empty div is then positioned, so that it overlaps with the text elements.

Applying the Transparent Overlay Automatically

To simplify the use of this technique, I created a small JavaScript function that will add the extra transparent div along with the needed CSS styles automatically. All, you have to do is add the class transparent-overlay to the element you want to have the overlay and create the styles that define the layout of the transparent overlay.

The Structure of the HTML

In the example here I have a div with a header element and a paragraph of text. The div has a background image that is not immediately usable as a background to place text on, so I need to create a transparent overlay on the image to place the text on.

The first thing to do is to include the JavaScript file in the header:

	<script src="javascript/overlay.js"
	           type="text/javascript"
	           charset="utf-8"></script>

After the JavaScript function is included you can add the class transparent-overlay to the elements you want to have a transparent overlay. Here I have added it to the div that contains my text elements.

	<div class="module order transparent-overlay">
	  <h2>Udfyld en</h2>
	  <p>bestillingsseddel og send den til os…</p>
	</div>

This div element has an image background.

	.module.order {
	  background:url(../images/orderpad.jpg) no-repeat 0 0;
	}

Once the JavaScript function has transformed the HTML there will be two extra div elements.

The first is an empty div that has the class overlay-background added. This class is styled by the JavaScript function as described in the next section, but you can of course override that styling by adding your own stylerule for the overlay-background class.

The second div is wrapped around the elements that were originally wrapped in the element with the transparent-overlay class. This div has the class overlay-message added, which again allows you to style the text as you want to.

Here’s how the structure looks after the transformation.

	<div class="module order">
	  <div class="overlay-background"></div>
	  <div class="overlay-message">
	    <h2>Udfyld en</h2>
	    <p>bestillingsseddel og send den til os…</p>
	  </div>
	</div>

The CSS Rules To Style the Overlay

The transformation function adds a stylerule at the beginning of the first stylesheet in the page. That stylerule defines the look of the empty div added to the HTML. The rule looks like this:

	.overlay-background {
	  background:#222;
	  filter:alpha(opacity=80);
	  height:100%;
	  -khtml-opacity:0.8;
	  -moz-opacity:0.8;
	  opacity:0.8;
	  text-shadow:0 0 0 #000;
	  width:50%;
	}

You are of course free to add your own stylerule to override this or to add other attributes to the look of the transparent overlay; you might e.g. want the transparent layer to be darker, in which case you would change the background color of the overlay-background stylerule.

In the example here I would probably add some styles to position the overlay background and the overlay message on top of each other and I would also add a specific width to the overlay-background to match the amount of text better than the default width of fifty percent of the containing element.

	.module .overlay-background {
	  left:1em;
	  position:absolute;
	  top:0;
	  width:11em;
	}
	.module .overlay-message {
	  left:1em;
	  position:absolute;
	  top:0;
	}

Conclusions

And that is pretty much all there is to it. I’ve seen this work in Safari 3, Firefox 2, and IE 7. The JavaScript function is released here with an MIT license, so feel free to use it under those rules.

You should be aware of one restriction on the use of this script because of the way that it inserts a stylerule in the first stylesheet on the page. I initially had a couple of @ (at-sign) directives at the start of my stylesheet; i.e. a @charset directive and a couple of @import directives. It turned out that Firefox does not like that. It fails to insert the rule complaining that the node cannot be inserted at the specified point in the hierarchy.