How to make text as background behind text

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 :