Блог

Главная - Вопросы по программированию - Выравнивание 2 фоновых изображений

Выравнивание 2 фоновых изображений

#css #image #bootstrap-4 #background-image

#css #изображение #bootstrap-4 #фоновое изображение

Вопрос:

Я пытаюсь найти способ выровнять 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 -->

Комментарии:

1. В качестве альтернативы, может ли это быть одно фоновое изображение в контейнере-оболочке или несколько фоновых изображений в одном контейнере-оболочке?

2. Привет @CraftedPod Я предполагаю, что это может быть, но я подумал, что 2 отдельных контейнера с отдельными фоновыми изображениями будут лучшим способом управления этим. В обоих разделах будет содержаться содержимое, поэтому на самом деле не хочется возиться с отступами / полями, чтобы разделить оба раздела.