Course lectures : 1 of 1

Z-index, background images and hidden text

Last updated: 15th August 2007

z-indexcss z-indexcss depth position

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.

COMMENTS

If you'd like to include code example please wrap your code within <pre><code> tags.


<pre>
<code>
function fullName(firstName, lastName)
{
    return firstName + ' ' + lastName;
}
</code>
</pre>