I am facing an issue with 3 horizontally aligned images and a background image. The problem is that when I set the background image for the aligned images, it flows over them instead of staying behind. I want the 3 aligned images to be on top of the background image. I tried using box-shadow but it didn't work. My goal is to prevent the background image from overlapping any of the 3 aligned images. How can I achieve this?
HTML
<div class="col-lg-12">
<img src="images/background.png" alt="Change">
<div class="img">
<div class="column-img">
<img src="/images/pic.jpg" alt="" width="426" height="479">
</div>
<div class="column-img">
<img src="/images/pic.jpg" alt="" width="425" height="479">
</div>
<div class="column-img">
<img src="/images/change.jpg" alt="" width="426" height="479">
</div>
</div>
</div>
CSS
//how I align my 3 images horizontally.
.column-img {
float: left;
width: 33.33%;
padding: 5px;
}