This series of the videos explains how to create Photo Gallery using PHP, MySQL, ImageMagic and jQuery. Using PHP you will be able to add, modify and populate data stored on the MySQL Database and display records of all images on the page. ImageMagic will help us to resize and crop images to the relevant dimentions, while jQuery will provide the support in the presentation of the gallery. The last two chapters are dedicated to adding the earlier created gallery to our Content Management System. Over 4 hours of videos!!!

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 | Contact
© Web Design Tutorials – Sebastian Sulinski