Creating Solid Text With A Transparent Background

Today, I will be showing you how to create a 50% transparent bounding box for your content. This is a good alternative to using transparent PNG. Both this technique and the png will require a hack in the CSS coding to display correctly.

To begin, we need to build our CSS code. So let’s start with the body background.

body {
background:url(deathwing_1600x1200.jpg) no-repeat;
}

Now that we have our background added, we can build our main container. The main container will serve as the global styles.

#container
{
padding:20px;
width:600px;
color:#FFFFFF;
position:relative;
float:left;
margin:50px 0 0 20px;
overflow:hidden;
}

Next, we need to build our transparent box. This section will house our main text container.

#container .dimmed
{

Notice here we need to denote the amount of opacity for the section. We use 3 version to identfy the opacity for the three mainly used internet browsers. Most other browser will fall into one of the the three.

opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;
background-color:#000000;
width:640px;
height:600px;
position:absolute;
top:0px;
left:0px;
z-index:-1;
}

Finally, we need to give our content area a defined position.

.content
{
position:relative;
}

Now that we have our CSS built let’s build our HTML.

<div id="container">
<div class="dimmed">
</div>
<div class="content">
<h1>Deathwing Rises From The Ashes Of Azeroth</h1>
<strong>An ancient evil lies dormant within Deepholm, the domain of earth in the Elemental Plane.</strong><br><br>
Hidden away in a secluded sanctuary, the corrupted Dragon Aspect Deathwing has waited, recovering from the wounds of his last battle against Azeroth and biding his time until he can reforge the world in molten fire.<br><br>Soon, Deathwing the Destroyer will return to Azeroth, and his eruption from Deepholm will sunder the world, leaving a festering wound across the continents. As the Horde and Alliance race to the epicenter of the cataclysm, the kingdoms of Azeroth will witness seismic shifts in power, the kindling of a war of the elements, and the emergence of unlikely heroes who will rise up to protect their scarred and broken world from utter devastation.
</div>
</div>

And you are done.Click here to see the Final Version.

Leave a comment