I am experiencing an issue where the background image of a div element is not occupying the full image. I want to display images side by side with text underneath them.
Below is the CSS code:
.img-w {
position: relative;
background-size: cover;
background-position: center;
cursor: pointer;
height: 150px;
width: 200px;
}
And here is the HTML code:
<div style="width: auto;height: auto"><div class="img-w col-md-3 col " id=" {{$image->id}}" style="background-image: url('{{$image->filename}}')" data-src=" {{$image->filename}}">
</div><span style=" color: #333333;
position: relative;
width: 100%;
text-align: justify;
display: inline;">{{$image->description}} <i class="fa fa-upload" style="margin-left: 10px; color:#333333;"></i><br/> <br/></span></div>