Z-index, background images and hidden text

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.

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 the images but I've made them very quickly for demonstrating purposes.
You can download them together with this tutorial.

Add a comment