ansaurus

Question

Overlap images in CSS

Answer 1

A:

http://www.w3schools.com/Css/pr_pos_z-index.asp

Enrico Pallazzo 2010-10-24 21:50:47

Answer 2

A:

Try

#overlapthis {
    position: absolute;
    top: ??px;
    left: ??px;
    z-index: 1;
}

Jakub Konecki 2010-10-24 21:51:55

Answer 3

A:

What you need to do is set the position. See here for more info: http://www.w3schools.com/css/css_positioning.asp

Tim Čas 2010-10-24 21:52:37

Answer 4

+2 A:

#overlapthis {
    background-image:url("mymessage.gif");
    height:100px;
    left:50px; /* play around with this */
    position:absolute;
    top:90px; /* and play around with this */
    width:500px;
}

#thebigimage {
    background-image:url("bread_wine.jpg");
    height:548px;
    margin-left:auto;
    margin-right:auto;
    position:relative; /* and this has to be relative */
    width:731px;
}

Claudiu 2010-10-24 21:55:19

Worked perfectly! Thank You so much!

MP123 2010-10-24 22:00:38

No worries buddy, anytime. Hope you understand what happens there :)

Claudiu 2010-10-24 22:02:47

Answer 5

A:

As you have it right now, the image overlaps already. You just can't see it because you didn't add sizes to your overlapthis div. Try this:

#overlapthis {
    background-image: url(mymessage.gif);
    width: 500px;
    height: 100px;
}

Then add margins (and an position: absolute) to position the image at your desired location.

Skunk 2010-10-24 21:56:27

ansaurus

tags:

views:

answers:

Overlap images in CSS

related questions