How to make text in transparent box

See the image with text box:

How to do it:

- Create your image background using your image link with CSS . You create a div element (class="background") with a fixed height and width, a background image, and a border.

- Then you create a smaller div (class="transbox") inside the first div element. This div also have a fixed width, a background-color, and a border.

<style type="text/css">
div.background
  {
  width:200px;
  height:140px;
 background:url(http://dc268.4shared.com/img/K82dxZYV/1_online.jpg) repeat;
  border:2px solid black;
  }
div.transbox
  {
  width:130px;
  height:100px;
  margin:10px 30px;
  background-color:#ffffff;
  border:1px solid black;
  filter:alpha(opacity=60); 
  opacity:0.6;
  }
div.transbox p
  {
  margin:10px 20px;
  font-weight:bold;
  color:#000000;
  }
</style>

All the red ones you can change by yourseft to make fitting or suiting your image background and text box.

- Make Div class of Background and Transbox , and insert your text inside transparent box in body.

<div class="background">
<div class="transbox">
<p>You type your tex here.
</p>
</div>
</div>

Please Select on Highlight All and then Click on Copy to Clipboard

<br /> <br /> <style type="text/css"> div.background { width:200px; height:140px; background:url(http://dc268.4shared.com/img/K82dxZYV/1_online.jpg) repeat; border:2px solid black; } div.transbox { width:130px; height:100px; margin:10px 30px; background-color:#ffffff; border:1px solid black; filter:alpha(opacity=60); opacity:0.6; } div.transbox p { margin:10px 20px; font-weight:bold; color:#000000; } </style><br /> <div class="background"><div class="transbox"><p>You type your tex here.<br /> You type your tex here.<br /> </p></div></div><br />

How to create a transparent image

First look at the two images below:
Normal image:

A transparent image:

The code source for Normal image :