How to put text into a Transparent Box using CSS

Step one of this tidy tutorial is creating a div element (class=”background”) with a fixed height and width, a background image, and a border.

div.background
{
width:730px;
height:400px;
background:url(bg.jpg) repeat;
border:5px solid #CCC;
}

Then we create a smaller div (class=”transbox”) inside the first.

div.transbox
{
width:620px;
height:200px;
margin:30px 50px;
background-color:#000;
border:1px solid black;

In addition we need to make this div transparent.

div.transbox
{
width:620px;
height:200px;
margin:30px 50px;
background-color:#000;
border:1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}

Inside the transparent div, we add some text inside a p element.

div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#fff;
}

So your page should look something like:

<html>
<head>
<style type=”text/css”>
div.background
{
width:730px;
height:400px;
background:url(bg.jpg) repeat;
border:5px solid #CCC;
}
div.transbox
{
width:620px;
height:200px;
margin:30px 50px;
background-color:#000;
border:1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#fff;
}
</style>
</head>
<body>
<div>
<div>
<p>Tidy text in here…
</div>
</div>
</body>
</html>

Download sample

Leave a Reply