Image behind class not aligning properly

wtp

New Member
#1
I have six responsive boxes with class name A, when i try to put an image behind it inside the div class pic it does not fit to exact behind the 6 boxes. The image slightly to leftside projected.

How to make it exactly behind the boxes?

I have tried but not able to remove the portion projecting to left side.
Mã:
.A {
  width: 60%;
  height: 110px;
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border-color: #e6e600;
  margin: -2px;
}

#container {
  white-space: nowrap;
  text-align: center;
  margin-right: 30%;
  border: px solid #CC0000;
}

.containerr {
  margin-top: 5%;
  margin-right: 20%;
  margin-left: 0%;
  border: px solid #FF3399;
}

.pic {
  background-size: 100vw 100vh;
}

.container2 {
  margin-top: 6%;
  margin-right: 20%;
  margin-left: 0%;
  border: px solid #009;
  margin-left: 20%;
  border: px solid #FF3399;
}
Mã:
<div class="container2">
  <div class="containerr">
    <div class="pic" style="background-image: url(https://picsum.photos/200/300/?random);">
      <div id="container">

        <div class="A" >
        
        </div>
        <div class="A" >
        
        </div>
        <div class="A" >
        
        </div>
      </div>
      <div id="container">

        <div class="A" >
        
        </div>
        <div class="A" >
        
        </div>
        <div class="A" >
        
        </div>
      </div>

    </div>


  </div>

</div>
 

Admin

Administrator
Thành viên BQT
#2
You need to change the width of the A elements to a third of the container, and remove the right margin of the containers to make the background and the rows fit.
Mã:
.A {
  width: calc(33.3% - 4px);
  height: 110px;
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border-color: #e6e600;
  margin: -2px;
}

#container {
  white-space: nowrap;
  text-align: center;
  border: px solid #CC0000;
}

.containerr {
  margin-top: 5%;
  margin-right: 20%;
  margin-left: 0%;
  border: px solid #FF3399;
}

.pic {
  background-size: 100vw 100vh;
}

.container2 {
  margin-top: 6%;
  margin-right: 20%;
  margin-left: 0%;
  border: px solid #009;
  margin-left: 20%;
  border: px solid #FF3399;
}
Mã:
<div class="container2">
  <div class="containerr">
    <div class="pic" style="background-image: url(https://picsum.photos/200/300/?random);">
      <div id="container">

        <div class="A" >
        
        </div>
        <div class="A" >
        
        </div>
        <div class="A" >
        
        </div>
      </div>
      <div id="container">

        <div class="A" >
        
        </div>
        <div class="A" >
        
        </div>
        <div class="A" >
        
        </div>
      </div>

    </div>


  </div>

</div>
 

Từ khóa phổ biến

You are using an out of date browser. It may not display this or other websites correctly.
You should upgrade or use an alternative browser.

Top