How do I position one image on top of another in HTML? (1 Viewer)

[Velocity]

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.

 

[theDBguy]

Look into using some CSS styles/tags.
For example:

CSS Styling Images

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[plog]

You can fight with CSS to do this. You'll to need z-index, position, top, left.

You can also use HTML canvas and javascript to "draw" on the screen:

HTML Canvas

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

[Khantwalv]

The simplest way to do this would be to use HTML and CSS to place the images. You can use the CSS <div> tag to create a container that holds your images and then use the position: absolute; property to place the images relative to each other. You can also use the z-index property to specify which image should appear on top of the other.

For example, the following HTML and CSS code will create a blue square with a red square in the upper right corner:

html 

<div>   

  <img src="blue_square.jpg" alt="blue square" />   

  <img src="red_square.jpg" alt="red square" style="position: absolute; top: 0px; right: 0px; z-index: 1;" /> 

</div>

You can also use the transform: translate() property to fine-tune the placement of the images.