How to Overlap Multiple Images Using CSS
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:
<title>CSS tutorial – 1</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<div id=”c3″><img src=”img1.jpg”></div>
<div id=”c2″><img src=”img-bg.jpg”></div>
And then save the file as .html (eg: test.html).
<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.
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
3. Next, open the file style.css and type following code:
border:#000 solid 1px;
border:#000 1px solid;
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.
4. Finally, open the html file we have created and you will see the image overlapped over another image.
This completes our overlapping images CSS tutorial. If you’ve found this tutorial helpful, please let us know in the comments!
You may also like:
- 3 Key Things To Consider Before Building Multiple Websites
- Top 8 Plugins for Optimizing Images in WordPress
- Designer's Guide to Images in Website Design
- 40 Popular PSD Scene Creators for Hero Images
- Setting up the Perfect Background for Your Product Photoshoot Images
- 10 Awesome Websites With Full-Screen Background Images
- Adaptive Images - No Coding Needed to Produce a Brilliant-Looking Website?
Subscribe to our RSS feed!
Popular on Web Design Dev:
- Free Wix Website Templates
- 20+ Portfolio Website Templates for Architects
- 20+ Portfolio Website Templates for Artists
- Creative Resume Templates for Web Designers
- Web Safe Fonts with CSS
- Best Free Tumblr Themes
- 20+ Free HTML Templates
- Professional Free Bootstrap Themes
- Best Shopify Themes for High Conversions
- 20+ Events Production Website Templates