Overlap images in CSS

css

Solution

#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;
}

Problem

How do I get "mymessage.gif" to show over "bread_wine.jpg". mymessage.gif has a transparent background. ``` <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>overlap images</title> <style type="text/css"> <!-- #navbar { font-size: 18px; font-weight: bold; text-align: center; } #thebigimage { background-image: url(bread_wine.jpg); height: 548px; width: 731px; margin-right: auto; margin-left: auto; } #overlapthis { background-image: url(mymessage.gif); } --> </style> </head> <body> <div id="navbar">this is the nav bar</div> <div id="thebigimage"> <div id="overlapthis"></div> </div> </body> </html> ```

Original source