Z-index, background images and hidden text - Search Engine friendly

• Web Designer
• Skills
• Portfolio
• Tutorials
• Contact

Z-index, background images and hidden text - Search Engine friendly

In this tutorial I will explain how to use background images with a different tags to place them one on top of the other using absolute positioning and z-index.
Demo is available here.

Images used in this tutorial: 01.gif | bullet.gif

First create a simple structure like for instance:

<div id="wrapper">
<h1>Some text with the keywords</h1>
<h2>Some more secondary keywords</h2>
</div>

Now just apply styling to it::

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
padding: 20px 0px 20px 0px;
text-align: center;
}
#wrapper {
padding: 0px;
width: 800px;
margin: 0px auto 0px auto;
height: 300px;
position: relative;
}
h1, h2 {
text-indent: -999999px;
display: block;
margin: 0px;
padding: 0px;
font-size: 11px;
position: absolute;
overflow: hidden;
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 0px 0px;
}
h1 {
background-image: url(01.gif);
height: 228px;
width: 222px;
left: 50px;
top: 30px;
z-index: 0;
}
h2 {
background-image: url(02.gif);
height: 201px;
width: 141px;
left: 210px;
top: 40px;
z-index: 1;
}

In this example we are using wrapper with relative position and h1 and h2 tags which will display our images in the background. h1 and h2 tags have absolute position, text-indent of -999999px (this is to get read of the text inside of the tags) hidden overflow and block display. These are main elements which make the whole magic.

Using z-index you can control wether first or second image is display on top of the other.

This is very good approach when you have some keywords and want them to be "invisible" - yes - this is completely acceptable method - Google will read you keywords and you will not get a bad mark for doing this.

Sorry for images but I've made them very quickly for demonstrating purposes.

I hope you'll find it useful.