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.
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:
#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.
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!
The post How to Overlap Multiple Images Using CSS appeared first on Web Design Blog | Magazine for Designers.
How to Overlap Multiple Images Using CSS
Geen opmerkingen:
Een reactie posten