Create Content Management System with Dreamweaver CS4, PHP, MySQL and FCK Editor. This series of the tutorials will guide you through the process of developing your very own Content Management System using well known tools and technologies such as: Dreamweaver CS4, PHP, MySQL and FCK Editor.

CSS tutorials

  • Z-index, background images and hidden text
  • 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.
Demo is available here.

Images used in this tutorial:

 

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.

 
  • Thank you for subscribing to our newsletter.
  • To complete registration please click on the link in the email which has been sent to you.
  • Invalid first name
  • Invalid last name
  • Invalid email address

Website Design Company | Website Design Company Sussex | Website Design Company Chichester | Website Design Packages | Tutorials Resources | Articles
© Web Design Tutorials – Sebastian Sulinski