У меня есть фоновое изображение, и поверх этого изображения я должен поместить 3 x 3 изображения, но изображения накладываются

Question

Я разрабатываю сайт, на котором я использую Bootstrap 4. У меня есть фоновое изображение, и поверх этого изображения я должен поместить 3 x 3 изображения, но изображения накладываются.Также это отзывчиво.

Вот код:

        <div class="col-md-4  col-sm-4" >
            <div class="column">
            <img src="assets/images/bg.png" class="img-responsive" >
            </div>
        </div>

        <div class="col-md-4 col-sm-4 " >
            <div class="column">
            <img src="assets/images/bg.png" class="img-responsive">
            </div>
        </div>

        <div class="col-md-4  col-sm-4" >
            <div class="column">
            <img src="assets/images/bg.png" class="img-responsive" >
            </div>

        </div>  
    </div>

образец изображения

Answer 1

Вы можете попробовать это для простого примера полноэкранного фонового изображения. Вы можете отредактировать значение минимальной высоты, чтобы получить желаемый эффект.

Пример: https://codepen.io/brooksrelyt/pen/REzMZW

HTML:

<div class="full-home" style="background-image:url('https://via.placeholder.com/1200x800');" ></div>

CSS:

.full-home {
    width: 100%;
    background-repeat:no-repeat;
    background-position:50% 50%;
    background-position:50% 50%\9 !important;
    background-size: cover;
    min-height: 100vh;
}

С вашим кодом (я изменил URL вашего изображения, потому что у меня нет доступа к вашему):

<div class="full-home" style="background-image:url('https://via.placeholder.com/1200x800');"></div>
<div class="container">
  <div class="row">
    <div class="col-md-4  col-sm-4">
      <div class="column">
        <img src="https://via.placeholder.com/300x200" class="img-responsive">
      </div>
    </div>

    <div class="col-md-4 col-sm-4 ">
      <div class="column">
        <img src="https://via.placeholder.com/300x200" class="img-responsive">
      </div>
    </div>

    <div class="col-md-4  col-sm-4">
      <div class="column">
        <img src="https://via.placeholder.com/300x200" class="img-responsive">
      </div>

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

Answer 2

Вы должны установить background-image div, пожалуйста, посмотрите на это jfFiddle

body {
  background-image: url(https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
  background-size: cover;
}

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
  height: 100px;
}

.background1 {
  background-image: url(https://mdbootstrap.com/img/Photos/Others/background.jpg);
  background-size: cover;
}

.background2 {
  background-image: url(https://img.freepik.com/free-vector/abstract-low-poly-design-background_1048-8196.jpg?size=338&ext=jpg);
  background-size: cover;
}

.background3 {
  background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRPgx2MsZXRF0vNZ2_UX9VPouShDW33Ug4LBLzoAi_bPuqZdH0j);
  background-size: cover;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col background1">
      1 of 3
    </div>
    <div class="col background2">
      2 of 3
    </div>
    <div class="col background3">
      3 of 3
    </div>
  </div>
</div>