Z-index and background images

Freelance Web Designer East Sussex

All my tutorials are completely free of charge. If you found them useful and would like to make a donation towards the new tutorials, please click the button below.

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.

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

I hope you'll find it useful.