Is there a way to position one image on top of another in a responsive manner? I tried using position: absolute and z-index, but the result is not responsive. When the screen size changes, the image ends up on top or behind another section instead of expanding its container. I have experimented with different methods, but they only seem to mess up the page layout. Any suggestions on how to resolve this issue?
Here is the desired outcome: https://i.sstatic.net/RnTkG.png And here is the problem: https://i.sstatic.net/DrkeR.png
When I try setting the width to 100% for responsiveness, it causes further issues with the layout. However, if I don't adjust the width, the image file size may be too large for some devices.
.container-home-about {
padding-top: 65px;
padding-bottom: 65px;
}
.row {
height: 100%;
}
.about-content>p {
font-size: 16px;
font-weight: 400;
color: #5d77aa;
}
.about-image {
position: relative;
}
.img-bottom {
position: relative;
z-index: 0;
top: 0;
left: 0;
}
.img-top {
position: absolute;
z-index: 1;
top: 80px;
left: 75px;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e0c01011a1d1a1c0f1e2e5b405e405c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
<div class="home home-about">
<div class="container container-home-about">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 left">
<div class="about-content">
<p style="max-width: 520px;">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 right">
<div class="about-image">
<img src="https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" class="img-bottom">
<img src="https://images.unsplash.com/photo-1500630417200-63156e226754?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="" class="img-top">
</div>
</div>
</div>
</div>
</div>
<div class="home home-partner" style="border-top: 1px solid #EAEAEA;">
<div class="container container-home-partner">
<div class="col-xl-3 col-lg-4 col-md-4 partner-title">
<div class="title" style="z-index: 9;">World class brand</div>
<div class="subtitle" style="z-index: 9;">Our Partners</div>
</div>
</div>
</div>
</body>