CODEWITHSUNDEEP
htmlcssimage
Adrian Pirvulescu
Adrian Pirvulescu

Reputation: 4340

Html Image over image

Can anyone tell me how can I add an image over another image without using Z-index or Z-order?

Upvotes: 16

Views: 108261

Answers (4)

sara
sara

Reputation: 3

You can also use text over image by using the following code:

<TABLE BORDER="0" cellpadding="0" CELLSPACING="0">
  <TR>
    <TD WIDTH="221" HEIGHT="300" BACKGROUND="samplepic.jpg" VALIGN="bottom">
      <FONT SIZE="+1" COLOR="yellow">Sample Text</FONT>
    </TD
  </TR>
</TABLE>

Hope that helps.

Upvotes: -3

roryf
roryf

Reputation: 30170

Difficult to answer properly without knowing exactly what you want to achieve, z-index probably isn't what you actually need. For instance the following would work:

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

#container {
    position:relative;
}

#img2 {
    position: absolute;
    left: 50px;
    top: 50px;
}

Also whether you use <img> tags or background-images depends on the semantic valueof the images, i.e. are they presentational or actualy content of the page?

Upvotes: 37

Weegee
Weegee

Reputation: 2273

The easiest way is to make sure they're both the same size, one has transparency, and you use this snippet:

<img style="background:url(image.jpg)" src="overlay_image.gif" alt="" />

Upvotes: 17

Colin
Colin

Reputation: 10638

Set the main image's background image in CSS with the background-image property

Upvotes: 5

Related Questions