Alex Rivera | Logout

How do I position one image on top of another in HTML?

Asked 2008-09-07T14:31:25.447
329

I'm a beginner at rails programming, attempting to show many images on a page. Some images are to lay on top of others. To make it simple, say I want a blue square, with a red square in the upper right corner of the blue square (but not tight in the corner). I am trying to avoid compositing (with ImageMagick and similar) due to performance issues.

I just want to position overlapping images relative to one another.

As a more difficult example, imagine an odometer placed inside a larger image. For six digits, I would need to composite a million different images, or do it all on the fly, where all that is needed is to place the six images on top of the other one.

Edit
Report

1 Answer

5

The easy way to do it is to use background-image then just put an <img> in that element.

The other way to do is using css layers. There is a ton a resources available to help you with this, just search for css layers.

answered 2008-09-07T14:40:21.307

Your Answer