16th
August, 2010
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
How to put text into a Transparent Box using CSS
https://www.tidydesign.com/blog/how-to-put-text-into-a-transparent-box-using-css/