CODEWITHSUNDEEP
html
MichaelP
MichaelP

Reputation: 11

How do I display multiple images onto one images in HTML

I want to use HTML and display one large image. On this large image I then wish to display multiple smaller images, all on different places and sizes.

I would prefer doing this using HTML only. But, if this is not possible, Javascript or something like that is also an option... :-) If anybody has any idea using PHP, that would also be great.

I have search the web and StackOverflow, and tried MANY possible solutions, but none of them allowed me to display one big image, and then display multiple other images on top of this big image.

Any help would be greatly appreciated.

Kind regards, Michael

Upvotes: 0

Views: 3342

Answers (4)

Jorge Alvarado
Jorge Alvarado

Reputation: 2674

you cannot overlay an image over another image in pure HTML only, but what you CAN do is re-locate a image's position onto another tag and just move it accordingly with css.

Upvotes: 0

Nitish
Nitish

Reputation: 299

you can use a container div which will contain all the smaller images. You can set background of that particular div.

your html as

<div id="container">

</div>

and css as follows:

div#container{

        background-image: url("image.jpg");
        background-repeat:no-repeat;
        height:100%;
    }

Upvotes: 2

Martin Lyne
Martin Lyne

Reputation: 3065

You can position them as I have done in this JSFiddle: http://jsfiddle.net/xxUpk/

The top:-NNNpx is crude, you could use float and many other ways of positioning them. Also look into z-index to layer them.

Upvotes: 0

arkascha
arkascha

Reputation: 42885

Two alternatives:

  1. defining the big image in as background using CSS, then you can put onto it whatever html markup you want to. Such backgorund can also be declared for elements like divs, not only for the whole page.

  2. use absolut positioning inside your style definition. That way you can add big and small images to your markup and then position them on top of each other.

No javascript required for this and php has nothing to do with this.

Upvotes: 0

Related Questions