Question

I have 2 images that i need to use one over another while keeping them in the background,
currently i used the following code :

<div id="about_splash">
<img style="width:85%" src="image_src" />
</div>

where about_splash has the background css attribute

The problem is, these 2 images need to be in the background of some other html objects. which would be above and below div#about_splash.

I tried putting z-index, but that didnt work.

If i use the following code, how can i scale the inner image so it is a bit bigger than the parent

    <div style="background: url(layout/images/illustration.gif) 
        no-repeat center;min-    height:500px;">

    </div>
</div>

Answer 1

Farhan Ahmad already provided a good answer to you, however I’d like to contribute a bit further and maybe it would be of some help in the future.

This is a small code snippet I used a while ago for positioning a container in the dead center of the screen and then positioning another container in the middle of the first one. The positioning is fluid and it depends on the resolution of the viewer.

HTML:

<div id="parentContainer">
    <div id="childContainer">
       <!-- I'm the center of attention -->
    </div>
</div>​

CSS:

#parentContainer
{
    height: 200px;
    width: 200px;
    background: #9dc0dd;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px; /*This is half of the container Height*/
    margin-left: -100px; /*This is half of the container Width*/
}

#childContainer
{
    height: 100px;
    width: 100px;
    background: #435c68;
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -50px; /*This is half of the container Height*/
    margin-left: -50px; /*This is half of the container Width*/
}​

A demo of the above snippet can be found here.