Настройка фонового изображения для div - HTML & Css

Question

У меня есть 3 изображения по горизонтали. Я установил фоновое изображение (фоновое изображение) для выровненных изображений, как показано ниже. Когда я запускаю свой код, фоновое изображение обтекает изображения. Я хочу, чтобы 3 выровненных изображения появлялись поверх фонового изображения. Я пытался использовать box-shadow, который не мог работать. Я не хочу, чтобы фоновое изображение пересекало любое из 3 выровненных изображений. Как мне это сделать, пожалуйста?

PS: Извините за мой плохой английский sh.

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;
}

Answer 1

Хм, значит, вы хотите, чтобы background.png появлялся позади других изображений? Если вы настаиваете на наличии его в DOM, вам нужно удалить его из потока документов. Как то так:

.column-img {
  float: left;
  width: 33.33%;
  padding: 5px;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.background-anchor {
  position: relative;
}

<div class="col-lg-12 background-anchor">
  <img class="background" src="https://placekitten.com/1300/1300" alt="Change">

  <div class="img">
    <div class="column-img">
      <img src="https://placekitten.com/426/479" alt="" width="426" height="479">
    </div>
    <div class="column-img">
      <img src="https://placekitten.com/425/479" alt="" width="425" height="479">
    </div>
    <div class="column-img">
      <img src="https://placekitten.com/426/479" alt="" width="426" height="479">

    </div>
  </div>
</div>

Answer 2

css:

.img {
   background-image: url('../images/pic.jpg');
}

это правильный способ поместить фоновое изображение в css получить дополнительную информацию от: W3school