How to Overlap Multiple Images Using CSS

Thursday, August 14, 2014

As you already know, you can accomplish basically anything with CSS if you know how to use it. Sometimes, you may want to position one image on top of another image with CSS and make them overlap. If you didn’t know how to do this, then you are reading the right article. In this tutorial, we are showing you how to make multiple images overlap using CSS.

Steps to position one image on top of other image in CSS

1. First of all, create an html file. You may use any IDE like notepad or notepad ++ or Adobe Dreamweaver to create an html file. In this tutorial, we are using plain notepad that is available in any Windows PC. Open notepad any type following code:

<html >

<head >

<title>CSS tutorial – 1</title>

<link rel=”stylesheet” type=”text/css” href=”style.css” />

</head>

<body>

<div id=”container”>

<div id=”c3″><img src=”img1.jpg”></div>

<div id=”c2″><img src=”img-bg.jpg”></div>

</div>

</body>

</html>

And then save the file as .html (eg: test.html).

Here,

<link rel=”stylesheet” type=”text/css” href=”style.css” /> will link the stylesheet that we are going to create.

And then with <div> tag we are creating two div with images that will overlap.

step-1-create-html-position

2. Next, in the same directory (folder) save both images i.e img1.jpg and img-bg.jpg and also create new css file named as style.css and save n same folder. To do that, open notepad and save it as style.css

step-2-save-files-position

3. Next, open the file style.css and type following code:

#container{

width:250px;

height:250px;

position:relative;

border:#000 solid 1px;

}

#c3{

width:100px;

height:50px;

border:#000 1px solid;

top:50px;

left:50px;

position:absolute;

}

And then save the file. Make sure it is saved as .css

Here we are adding css property to those divs we have created in the html file. Width and height will set the width and height of the div respectively. Border will give a border to the div that you will notice in the html file. Top and left are margins and position is the positioning of the div. A relative is that which is positioned relative to its normal positioning and absolute is positioned relative to its parent element (div) that eventually makes it overlap.

step-3-create-css-position