[TIPS] HTML transparent background

If you are a webdesigner there is a big chance you have encountered this problem before: transparent backgrounds. In this post I will describe three methods to create transparent backgrounds using images, HTML or simply by using CSS.

1. Using 1px*1px image
2. Adding a new HTML background div
3. Using CSS3 to add the background div
4. Using RGBa color

Let's start with this example: you have a div with the id #example and you want to add a transparent blue background behind the text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a dolor dui. Sed arcu sapien, molestie quis euismod et, varius a ipsum.

1. Using 1px*1px image

This method is the oldest one, it works in all browsers but has some drawbacks: you have to use an image, thus forcing the client to make one more request to the server to get it and also, to change background's color you have to create another image.

First you have to create a 1px*1px image using an image editor (Adobe Photoshop, GIMP, etc...) and save it in the appropriate format (.png or .gif).

Now we only have to add that image as a background to our div using css

#example{
 background-image: url('images/bg.png');
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a dolor dui. Sed arcu sapien, molestie quis euismod et, varius a ipsum.

2. Adding a new HTML background div

Creating a new div as a background is a method also used when you want to have full control over background's size, opacity and position. Add a new div having the class background inside your #example div before the content and style it as shown below. We need a new div because background-opacity rule does not exist cross-browser.

#example{
position:relative;
z-index:1; /* We also add a z-index to the div. Because z-indexes are relative this will make the {-1 indexed element} to appear on top of the wrap div (the div having the the space-background) */
}
#example .background{
background:#008fbb;
position:absolute;
width:100%;
height:100%;
opacity:0.5;
top:0px;
left:0px;
filter:alpha(opacity=50); /* For IE */
z-index:-1; /* Without it the background would appear over the p*/
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a dolor dui. Sed arcu sapien, molestie quis euismod et, varius a ipsum.

3. Using CSS pseudo-elements to add the background div

Same as before but this time we keep our HTML file clean by using CSS :before pseudo element to add an empty div inside our #example div, just before it's content.

#example{
position:relative;
z-index:1;
}
#example:before{ 
/* :before pseudo-element adds a new div having the styles declared below */
content: '';
background:#008fbb;
position:absolute;
width:100%;
height:100%;
opacity:0.5;
top:0px;
left:0px;
filter:alpha(opacity=50); /* For IE */
z-index:-1;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a dolor dui. Sed arcu sapien, molestie quis euismod et, varius a ipsum.

4. Using RGBa color

This is the most straightforward method: use a color that also has trasnparency (alpha channel) as the background. The only drawback is that IE8 and under does not support RGBa.

#example{
background: rgb(0,30,200); /* Fallback for IE6-8 */
background: rgba(0,30,200,0.5);
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut a dolor dui. Sed arcu sapien, molestie quis euismod et, varius a ipsum.