How to show background image over background image using CSS

Question

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

I tried the following code, but it does not work 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; } 

Adjust position: relative on the image and fill the image deeper into the stacking order with z-index: -1 .

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

Answer 2

deleting the front 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>