How to show a background image over foreground image using CSS

Question

I want to set the background image so that it appears in front of foreground image.

I tried the following code but it is not working as I expected:

.background-image
  {
      border :0px;
      background-image: url(/images/icon.png);  
      z-index:1000;      
  }
  .foreground-image
  {
      width:200px;
      height:113px;
      border :0px;
      z-index:1;
  }

<div>
    <a href="#" class="background-image">
        <img class="foreground-image" src="./images/pic1.jpg"  />            
    </a>
</div>

I am using CSS2.

Answer 1

Here is one way to do it.

If this is your HTML:

<div>
    <a href="#" class="background-image">
        <img class="foreground-image" src="http://placekitten.com/200/100"/>  
    </a>
</div>

apply the following CSS rules:

div {
    border: 1px dotted blue;
}
.background-image {
    border: 1px dotted red;
    background-image: url(http://placekitten.com/200/50);
    background-position: center left;
    background-repeat: repeat-x;
    display: block;
    width: 500px;
}
.foreground-image {
    vertical-align: top;
    width: 200px;
    border: 0px;
    position: relative;
    z-index: -1;
}

Set position: relative on the image and throw the image deeper into the stacking order by using z-index: -1.

See demo at: http://jsfiddle.net/audetwebdesign/HUK28/

Answer 2

by removing the foreground-image.

.background-image {
  border :0;
  background-image: url(/images/icon.png);
  width:200px;
  height:113px;   
  display: block;  
}
.foreground-image {/**/}

<div>
  <a href="#" class="background-image"></a>
</div>