for a button if i need a background image i would use background like below

#statusButton span {
    color: #445058; 
    font-size: 14px; 
    font-weight: bold; 
    text-shadow: 1px 1px #fff; 
    padding: 7px 29px 9px 10px;
    background: url('../images/Arrow.png') no-repeat 53px 7px;
    display: block;
}

similar to here .html

now How do i add this type of image as a foreground for a image. when i use same background attr for image th regular image will overlap is what i need is something of foreground type of css. an image over a image.

for a button if i need a background image i would use background like below

#statusButton span {
    color: #445058; 
    font-size: 14px; 
    font-weight: bold; 
    text-shadow: 1px 1px #fff; 
    padding: 7px 29px 9px 10px;
    background: url('../images/Arrow.png') no-repeat 53px 7px;
    display: block;
}

similar to here http://www.soundendeavors./clients/index.html

now How do i add this type of image as a foreground for a image. when i use same background attr for image th regular image will overlap is what i need is something of foreground type of css. an image over a image.

• javascript
• jquery
• css
• jquery-ui

• Fun fact: you can put multiple urls in background. – Derek 朕會功夫 Commented Jan 1, 2013 at 0:45

2 Answers 2

So you want to put another image on top of one, right? You can do it this way:

div{      /*You can use whatever element you prefer*/
    width: 400px;
    height: 400px;
    background-image: url('link1.jpg'), url('link2.png');     /*URLs*/
    background-position: left top, right bottom;              /*position*/
    background-repeat: no-repeat;                             /*repeat or not*/
}

Fast and easy. The first image in the list will show up on the very top.

Demo: http://jsfiddle/DerekL/Pdxpe/

The good thing about this method is that you still has one solid element, instead of wrappers floating around.

if i understand You right, You want to overlay another image over an image?

to overlay another image over an existing image You can work with position in CSS:

CSS:

#wrapper {
    position: relative;
}
#img1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index:0;
}
#img2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index:100;
}

HTML:

<div id="wrapper">
  <img src="img1.jpg" id="img1" />
  <img src="img2.jpg" id="img2" />
</div>

now the image with the id #img1 is under the image #img2, because of the lower z-index value...