html - I have a background image and over that image I have to put 3 x 3 images but images are overlapping

Question

I'm developing a site in which I use bootstrap 4. I have a background image and over that image I have to put 3 x 3 images but images are overlapping. Also it's responsive.

Here is code:

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

sample image

标签： htmlcssbootstrap-4

Answer 1

您可以试试这个全屏背景图像的简单示例。您可以编辑 min-height 值以获得所需的效果。

示例：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;
}

使用您的代码（我更改了您的图片网址，因为我无权访问您的）：

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