CSS Tutorial : Text as Background Over Text

So here in this tutorial we are going to make a text as background and write a text over it. Which will look something like this below.

Lets start our tutorial in steps.

=== STEP 1 ===

First part is to make a div with background. So here we are going to use code for this black div code.

<div class="bgclr">

</div>

and here is CSS code for this div and class bgclr.

.bgclr{
background-color:#000;
text-align:center;
padding:40px;
width:700px;
margin:10px auto;
}

we use margin: 10px auto; to make our div in center of the page.

 

=== STEP 2 ===

In this step we are going to write ” WELCOME ” in that div. So here code will get modified.

<div class="bgclr">
<span class="bgtext fnt">WELCOME</span>
</div>

and here is CSS additional codes we added for bgtext , and yes we use fonts from google fonts library.

.bgtext{
font-size:110px;
opacity:0.15;
color:#fff;
}

opacity is the thing which makes that text looks like watermark.

=== STEP 3 ===

Now the final part is the slogan over the Welcome text. So final code become

<div class="bgclr">
<span class="bgtext fnt">WELCOME</span>
<div class="slogan fnt1">Welcome to our site</div>
</div>

and final CSS become like this

.bgclr{
background-color:#000;
text-align:center;
padding:40px;
width:700px;
margin:10px auto;
}
.bgtext{
font-size:110px;
opacity:0.15;
color:#fff;
}
.slogan{
color:#fff;
position:relative;
top:-80px;
font-size:30px;
}

The key point is the Position and placing slogan text over background text. To position slogan text we used ” top ” in -ve value to make it go up.

That’s it. Hope our readers enjoy this tutorial.

These are some of the good tutorial for CSS Lovers :

• CSS Color Values and How to use them
• CSS Alternate table row color