2

Anyone know how to lay a div tag that has an Image in it on top of a other div tag that has its one image in it? In the end I want to lay one image on top of a other image.

Thanks

KumarR28
  • 21
  • 1
  • 2
  • 1
    possible duplicate of [How do I position one image on top of another in HTML?](http://stackoverflow.com/questions/48474/how-do-i-position-one-image-on-top-of-another-in-html) – robertc Jan 05 '11 at 19:00

4 Answers4

1

Why not do two div tags, one housing the other, both with background images applied to them. Then you can use the background-position to position them how you'd like.

<div id="one">
  <div id="two">
  </div>
</div>

#one{background:url('image_one.png') no-repeat}
#two{background:url('image_two.png') no-repeat}

EDIT: Make sure you set the height and width of the div's to match your image size.

Michael Irigoyen
  • 22,513
  • 17
  • 89
  • 131
0

Put a background image in the bottom <div> tag, and put an <img /> inside the div. Another possibility is to use 2 <img> tags, but apply Position:absolute to both and use z-index to specify the layer order.

JakeParis
  • 11,056
  • 3
  • 42
  • 65
0

You can set it up as a nested div with the internal div set to use relative positioning.

The following is the best tutorial I've ever seen on css positioning:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

Dave Novelli
  • 2,086
  • 4
  • 32
  • 42
0

solution 1:

<div style="position:relative">
  <div style="position:absolute;top:0;left:0;">
    <img src="foo.png" />
  </div>
  <div style="position:absolute:top:0;left:0;">
    <img src="bar.png" />
  </div>
</div>

solution 2:

<div style="background:url('foo.png') no-repeat scroll transparent">
  <img src="bar.png" />
</div>

not great solutions... Not sure why you would want to do this anyway

Endophage
  • 21,038
  • 13
  • 59
  • 90