I'm Awesome 2: How to add transparent image or writing text on an existing image using CSS

Suppose you have two images which would look perfect when overlapped over each other or you want to write some description of image over image itself without changing the image.In these cases this article will be of great use.

The article is really easy to understand for all beginners and require very little knowledge of CSS and HTML.

Listing 1: Code for overlapping images

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Making image transparent</title> <style type="text/css"> div.div1   {   width:600px;   height:300px;   background:url(1.jpg) repeat;   } div.div2   {   width:700px;   height:250px;   margin:10px 250px;   opacity:0.4;   filter:alpha(opacity=40);   } </style> </head> <body> <div class="div1"> <div class="div2"> <img  src="2.jpg" width="300" height="270"/> </div> </div> </body> </html>

Explaination

The css has been included in the same page.
First , we come to the body part. Here we have added 2 div .
The class name of first div is div1.
div1 is responsible for adding the background image on the div. The width and height are set to be 600px and 300px respectively .We added the background image using background:url(1.jpg) repeat .Here , url contains the path of image which will be displayed in the background.We used repeat s o that the background image pattern will repeat itself.
Inside the first div we include another div named div2.
div2 contains an image which is the image which we want to overlap the background image
Now we set the property of div2 so that transparency is introduced in the overlapping image.
The width and height are set to be 700px and 250px respectively for the overlapping image.
Now we set the opacity to some value which define the extent to which the image gets transparent like here we gave opacity:0.4 which set image opacity to 40%
For IE 8 or earlier version you need to use filter:alpha(opacity=40); for setting the opacity

Listing 2: Code for writing text on image

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Making image transparent</title> <style type="text/css"> div.div1   {   width:600px;   height:300px;   background:url(1.jpg) repeat;   } div.div2   {   width:400px;   height:250px;   margin:10px 200px;   opacity:0.4;   filter:alpha(opacity=40);   } p { color:#ffffff; } </style> </head> <body> <div class="div1"> <div class="div2"> <p>The Ultimate Dragon...</p> </div> </div> </body> </html>

Explanation :

We made a very small change so that this time we are writing a transparent text on our background image
We don’t make any changes to coding of outer div ie div having class div1
In inner div with class div2 we make a small change. We changed the margin value in css so that our transparent text appears at particular place on the background image.
Now instead of defining a image inside inner div2 ,we introduced a text using p(paragraph) tag.
We write the content which we want to display and then we set its property using css
In css for the paragraph we change its color so that it comes in white color(#ffffff)