In this tutorial I shall show you how to place an image over another image in html.
First of all let’s create a simple basic html document.
Step 1 – Create basic html document with basic code
In the above screenshot you will see a basic html document with some basic code.
Now let’s place two images in the document.
Step 2 – Place images in html document
In the above screenshot you will see I have created a div and given the class of name “container”. And inside the container I have added two images. Now let’s render it in the web browser to see how the images will look.
In the above screenshot you will see the two images are rendered in our web browser.
Now place the right small image on the left big image.
Step 3 – Place an image over another image using CSS
In the above image I have added a little bit of CSS code but before understanding CSS code let’s understand the container image tags. I have done modifications there.
You will see I have added the two classes to both images which I highlighted in white rectangle border.
These classes are necessary because we need to control these two images by their classesses names.
Now in the yellow highlighted area you will see I have given the position property to our parent container. The value of position property is relative. This is because our images will only flow between the container. They will not be positioned outside our container.
In the orange highlighted area you will see I have applied some CSS properties to our image1.
First property is the position and the value I have given is absolute.
Because we need to place the image1 on the image 2 that’s why we need to give the absolute position to our image1.
And after that we need to define a placement of our image where it needs to be placed. In our case I have positioned it on the left and top side of our document. And at last I have given the border 2 pixels and the color is red.
So that I could clearly show you the exact placement of the image when we render it in the web browser.
Now let’s see the actual result in the browser.
Congratulations! You have learned how to place an image over another image in html using CSS.
You may also like: