I attempted to insert images into the div but encountered difficulties.
<img
class="img-fluid"
src="https://via.placeholder.com/800x800"
style="border-radius: 20px"
/>
As a result, I experimented with adding background images to divs. However, the images were not displaying. Can someone provide me with a solution and explain why this issue is occurring?
<div class="col-lg-6">
<!-- ??????? how do i create the grid -->
<div class="row g-0">
<div class="col-lg-4">
<div
class="imgcollage"
style="background-image: url(../img/img2.jpg)"
></div>
</div>
<div class="col-lg-8">
<div
class="imgcollage"
style="background-image: url(../img/img2.jpg)"
></div>
</div>
</div>
<div class="row g-0">
<div class="col-lg-8">
<div
class="imgcollage"
style="background-image: url(../img/img2.jpg)"
></div>
</div>
<div class="col-lg-4">
<div
class="imgcollage"
style="background-image: url(../img/img3.jpg)"
></div>
</div>
</div>
</div>
Below is the corresponding CSS:
.imgcollage {
height: 100%;
width: 100%;
background-position: center;
background-size: cover;
border-radius: 20px;
}