Question

我正在尝试找到一种方法来在单独的容器中对齐2个背景图像。正如您将在代码段中看到的那样，我在2个背景图像上的形状未正确对齐。曲线应该在两个容器上完美对齐。

我能够在第二个“ OverviewContent”部分中使用最小高度来对齐形状，但问题是当我将其取下时，它会完全破坏对齐方式。我希望这些部分能够及时响应。

短，我想要2个部分具有2个单独的背景图像，但这些图像必须完美对齐，我该怎么做？（这两个部分的高度都会根据当时该部分的内容而改变）

让我知道是否有人有任何想法。干杯

.technology-overview-header .headerPad {
    background: url("https://assets.testcre8.co.uk/images/mcauliffe-technology-header-image.jpg") no-repeat center;
        background-size: auto;
    min-height: 496px;
    background-size: auto 100%, cover;
}

.introHeader1.dzsparallaxer .headerPad {
    padding: 134px;
}

.OverviewContent {
    background: url("https://assets.testcre8.co.uk/images/about-mcauliffe-background-image.jpg") no-repeat center;
        background-size: auto;
    background-size: cover;
}

.OverviewContent {
    padding: 0px 0px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Header Image -->
  <section class="introHeader1 technology-overview-header dzsparallaxer auto-init height-is-based-on-content use-loading mode-scroll loaded dzsprx-readyall g-topSec-mt-ipad" data-options='{direction: "fromtop", animation_duration: 25, direction: "reverse"}' style="margin-top: 112px;"> 
    <div class="container-fluid g-color-white headerPad">
      <div class="row">
        <div class="col-10">

        </div>
      </div>
    </div> 
  </section>
  <!-- End Header Image --> 
  
    <!-- Content -->
  <section class="OverviewContent g-pb-200">                    
    <div class="container">  
      <div class="row breadcrumb-trail">
       <div class="col-12 g-pb-200 g-pt-20">
        <p><a href="/" title="McAuliffe Website Homepage">Home</a> / Our Projects</p>   
       </div>           
      </div>        
      <div class="row"> 
        <!-- Info Blocks -->
        <div class="col-lg-12">
          <h2>H2 title goes here</h2>           
          <div class="row list-unstyled">
            <div class="col-lg-6 g-mb-20">
              <p class="introText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam tempor magna, et congue velit sodales eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam tempor magna, et congue velit sodales eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            </div>
            <div class="col-lg-6 g-mb-20">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam tempor magna, et congue velit sodales eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam tempor magna, et congue velit sodales eu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
            </div>
          </div>                   
        </div>
        <!-- End Info Blocks --> 
      </div>
    </div>
  </section>
  <!-- End Content -->

对齐2张背景图像

0 个答案: