[Dusteh]

As the title says, how do you add an image over an image using html or css?

[resent]

You could use divs.

For example:

Code

<div class="image1">
    <div class="image2"></div>
</div>

Code

.image1 {
    width: 300px; /* The width of the image */
    height: 300px; /* The height of the image */
    background: url('../yourimagesfolder/image.jpg'); /* The image */
}
.image2 {
    width: 100px; /* The width of the image */
    width: 100px; /* The height of the image */
    background: url('../yourimagesfolder/image2.jpg'); /* The image */
    position: relative;
    /* fiddle with the stuff below until you have it positioned where you want it. */
    top: 100px;
    left: 0px;
    right: 0px;
}

[xSploit™]

position:absolute is your friend in this case!

[Krоnus]

Sure, try position: absoulte; or you can use z-index :)

[~Dec]

CSS3 allows multiple background images as well, using this syntax (left-most image = top-most image):

Code

.selector {
  background-image: url(top.png), url(bottom.png);
}

[loveplazza]

use z-index man
then you can add
thanks

[iDyxl]

I would go with z-index too
Probably the best way of doing it

http://css-tricks.com/almanac/properties/z/z-index/

[resent]

To use z-index, the images already have to be positioned over each other. [img]http://asterisk.apod.com/images/smilies/facepalm.gif[/img]

[iDyxl]

To use z-index, the images already have to be positioned over each other. [img]http://asterisk.apod.com/images/smilies/facepalm.gif[/img]

You can give it whatever position you want to, (not static ofc.), and then z-index will work, so why don't you got somewhere else with that ugly smiley?

[~Dec]

You can give it whatever position you want to, (not static ofc.), and then z-index will work, so why don't you got somewhere else with that ugly smiley?

z-index makes no difference and actually is the worst possible way to do it. What if you have #image1 and #image2, and you use position:absolute and z-index to lay #image2 over #image1. Then you want that when the user hovers over #image1, #image2 will change colour... Because of the z-index, #image1's mouse events won't occur because the mouse never passes over it since it's behind something else...

Honestly, CSS3 multiple background images were created just for this purpose. You can also use pseudo-elements, or simply just wrap one image in another one using divs...