How can I enlarge the image to fully occupy the space available in an element block, similar to the following image: (the black box represents the element box and the grey area is supposed to be the image.) https://i.sstatic.net/F0E82.png
In the current code, the image only contains the element box instead of fully occupying the space. I want the image to enlarge slightly to fill the element space completely. How can I achieve this? I have already looked at similar questions and answers, but they did not meet my requirements. Please assist me with this.
Below is my code snippet:
.category-box{
width:320px;
height: 320px;
}
.category-box-1{
background-image: url('https://unsplash.com/photos/pvICOT96zY8');
background-size: contain;
background-repeat: no-repeat;
}<!-- A CONTAINER HAVE TOTAL OF 3 BOX-->
<div class="fw-bold d-flex justify-content-around flex-wrap" id="categories">
<!-- BOX-1 OR SUB-CONTAINER-1-->
<div class="category-box category-box-1 bg-dark m-2 p-4 ">
<h2 class="h2-responsive">Women's</h2>
<a class="btn btn-lg btn-dark" href="#">
Show Now
<img src="https://via.placeholder.com/500.svg" alt="">
</a>
</div>
<!-- BOX-2 OR SUB-CONTAINER-2 -->
<div class="category-box category-box-2 bg-dark m-2 p-4">
<h2 class="h2-responsive"> Men's</h2>
<a class="btn btn-lg btn-light" href="#">
Show Now
<img src="images/arrow_forward.svg" alt="">
</a>
</div>
<!-- BOX-3 OR SUB-CONTAINER-3-->
<div class="category-box bg-dark m-2 p-4">
<h2 class="h2-responsive">Kids</h2>
<a class="btn btn-lg btn-light shop-now-btn" href="#">
Show Now
<img src="https://via.placeholder.com/500.svg" alt="">
</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81e3eeeef5f2f5f3e0f1c1b4afb1afb3">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>