Text with Transparent Background Over an Image using CSS

Text over an image

This posting will explain a CSS technique on how to place text with transparent background over an image. This technique can be used to put caption of the image by taking a small space on top or bottom of the image. Using this technique, we can overlay an image with text without the help of image-editing software like PhotoShop. Other benefit can be found on WordPress blog, where we can overlay post-thumbnail with the title of the post.

The following image shows a sample of end result of this CSS technique. You can view the image and its CSS attributes on HTML document here.

Sample of overlying text on an image

The Basics

The main CSS attribute that has a big role on placing text over an image is position. We place the image inside a div elemen with CSS attribute position: relative. As a reference, we call this div as container. And then we place the text over image inside the container div, with CSS attribute position: absolute. As a reference, we call this div element as text.

We need one more div element as the transparent text background. The CSS attribute for setting element transparency is opacity: m (for Internet Explorer browser, use attribute: alpha(opacity=n)), where m and n is the level of transparency. We place this div element inside the container. It has the same level with the text. As a reference, we call this div element as overlay.

Why don’t we place text inside the overlay? Because all elements inside overlay element will have the same level of transparency with overlay. This is not we want, since we should be able to set up the transparency of background element without affecting the text. By having different element to host text and background, we can achieve this goal.

The following code snippet shows the placement of HTML elements I described above:

<div class="container">
   <img src="image.png" />
   <div class="overlay">&nbsp;</div>
   <div class="text">Text</div>
</div>

Implementation Details

Now we will see how each CSS attribute is implemented. We start from the CSS attribute for container, as shown in the following code snippet:

.container {
  position: relative;
  width: 200px;
  height: 200px;
}

The position attribute for container should be set as relative. This is important because we will place other elements inside this div with absolute positioning. Back to CSS theory, absolute positioning inside the element with relative positioning will make the top and left attributes of the contained elements measured ‘relative’ to the containing element, not to document.

In CSS definition, we also set the width and height of the div elements as needed by the image.

Next, the following code snippet shows CSS definition for overlay:

.overlay {
  background-color: #000;
  position: absolute;
  width: 184px;
  height: 40px;
  top: 152px;
  left: 8px;
  opacity: 0.6;
  filter:alpha(opacity=60);
}

The position attribute needs to be made absolute because we will place the overlay on top of image with precise top and left positions. The background-color attribute specifies the color of transparent background. And the opacity and filter: alpha attributes specify the transparency of background color. We have to specify two attributes to achieve the same effect because most browsers understand opacity attribute, but Internet Explorer needs to use the second CSS attribute to understand transparency.

Next, the following code snippet shows the CSS definition for text:

.text {
  position: absolute;
  width: 184px;
  top: 160px;
  left: 8px;
  color: #fff;
  text-align: center;
}

The most important attribute is position. Because it specifies where the text will be placed. We also need to specify text-align attribute to specify text alignment over the image.

For the image itself, the CSS definition is as follow:

img {
  border: 0 none;
}

In the sample above, we specify no border for the image.

OK, that’s all about how we can place a text with transparent background over an image. For more details, you can view the source code of the sample from the link I mentioned above.

Related Posts

YARPP Template with Post-Thumbnails
 
This entry was posted in Web Design and tagged .

Comments are closed.

About Me

I am a professional developer and designer for the following systems: WordPress, Magento, and OpenCart. You can hire me to do overseas works related to those systems.
Hire me | Donate / Payment | Testimonials

Recent Comments