In this article, we will learn how to code in Html to show the image of foreground and background images and below Example code better to understand.
In the method, CSS is the main role to visual both images front and background and absolutely in the use of the container. use of CSS to set the z-index of foreground image a little higher than the background image.
Read also:
Rowspan and Colspan together in Html
How to create Multiple table in html
Table of Contents:
CSS Style:
body
{
background-color:#fefefe;
}
.container
{
width: 100%;
margin-right: auto;
margin-left: auto;
}
.none-list
{
list-style: none;
}
.item img
{
border-radius:10px;
}
.shadow
{
box-shadow: 10px 10px;
border-radius:20px;
}
.grid
{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
}
.grid-2 .item:nth-child(1) {
width: 70%;
margin-top: 0;
margin-left: 30%;
z-index: 3;
}
.grid-2 .item:nth-child(2) {
width: 45%;
margin-top: -45%;
margin-left: 0;
z-index: 4;
}
HTML Code
<body>
<section class="wrapper py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 position-relative order-lg-2">
<div class="grid grid-2">
<div class="item">
<figure class="shadow"><img src="21.jpg" alt=""></figure>
</div>
<div class="item">
<figure class="shadow"><img src="41.jpg" alt=""></figure>
</div>
</div>
</div>
<div class="col-lg-6">
<h2 class="mb-3">consectetur adipiscing elit?</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p class="mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="row">
<div class="col-xl-6">
<ul class="none-list blue-color light-blue mb-0">
<li><span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg>
</span><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></li>
<li class="mt-3"><span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</span><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
</ul>
</div>
</div>
</div>
</body>
Foreground and background image full code Examples:
<html>
<head>
<style type="text/css">
body
{
background-color:#fefefe;
}
.container
{
width: 100%;
margin-right: auto;
margin-left: auto;
}
.none-list
{
list-style: none;
}
.item img
{
border-radius:10px;
}
.shadow
{
box-shadow: 10px 10px;
border-radius:20px;
}
.grid
{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
}
.grid-2 .item:nth-child(1) {
width: 70%;
margin-top: 0;
margin-left: 30%;
z-index: 3;
}
.grid-2 .item:nth-child(2) {
width: 45%;
margin-top: -45%;
margin-left: 0;
z-index: 4;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<section class="wrapper py-5">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 position-relative order-lg-2">
<div class="grid grid-2">
<div class="item">
<figure class="shadow"><img src="21.jpg" alt=""></figure>
</div>
<div class="item">
<figure class="shadow"><img src="41.jpg" alt=""></figure>
</div>
</div>
</div>
<div class="col-lg-6">
<h2 class="mb-3">consectetur adipiscing elit?</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
<p class="mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="row">
<div class="col-xl-6">
<ul class="none-list blue-color light-blue mb-0">
<li><span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</svg>
</span><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span></li>
<li class="mt-3"><span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
</span><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span></li>
</ul>
</div>
</div>
</div>
</body>
</html>
