Проблема с 3-х колоночной разметкой с внешними элементами / столбцами, имеющими фоновое вложение: исправлено

Question

Я действительно близок к тому, что хочу, к 3 колонкам, где только центральное содержимое прокручивается с помощью обычной полосы прокрутки.

Моя проблема заключается в том, что внешние изображения / столбцы имеют background-attachment: fixed, которыйработает, но я пока не могу расположить фоновые изображения так, как хочу.

Единственный способ, которым я смог заставить это работать, - это расположить левую левую и правую правую (что противоположно тому, что я ищу).Это делает изображения максимально широкими при расширении страницы, я бы хотел, чтобы они были плотно сжаты, а их внешние края переполнялись при уменьшении ширины страницы.

Я могу лучше показать желаемый эффект спримеры.

1.) У этого исправлена ​​прокрутка фонового изображения, но по мере расширения страницы, вместо того, чтобы крепко прижиматься к контенту в центре, они перемещаются наружу.Когда они переполняются, они поступают так во внутренности - я ищу противоположность этих двух вариантов поведения.

https://codepen.io/xcr/pen/drNXPx

2.) Это ниже работает отлично, за исключением фоновых изображенийне фиксируются и прокручиваются с содержимым

https://codepen.io/xcr/pen/Jzbepo

Единственным отличием в этих примерах должны быть свойства background-position и background-attachment в CSS.

Html & css в первом примере (близкий к рабочему):

html, body {
    height: 100%;
    margin: 0;
    background-color: black;
    font-family: Verdana;
}

.wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: #000;
    height: 100%;
}

.leftTower {
    background-attachment: fixed;
    background-position: left top;
}

.rightTower {
    background-attachment: fixed;
    background-position: right top;
}

.side {
    min-height: 775px;
    flex-grow: 1;
    background-repeat: no-repeat;
    background-image: url("https://www.plaseebo.net/news/wp-content/uploads/2019/01/moonlight_gnaw_x_c-450x775.jpg");
}

.content {
    max-width: 750px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.mainContent {
    background-color: #00ff00;
    flex: 1;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}

.text-center {
    text-align: center;
}

@media only screen and (max-width: 750px) {
    .side {
        display: none;
    }
}

<div class="wrapper">
    <a href="http://www.example.com" target="_blank" class="side leftTower">
    </a>

    <div class="content">
        <header class="text-center">
            <img src="https://i.pinimg.com/originals/57/27/d7/5727d7e809ed08fb9cbda10b1f4a5e48.jpg" class="img-fluid" />
        </header>

        <main class="mainContent text-center">
            This is the content area<br />
            <div style="height: 220px;background-color: #0000aa;color: white;margin: 0 15px 0 15px;">
                Taking up 220px of vertical space to show stick footer behavior
            </div>
        </main>

        <footer class="text-center">
            <img src="https://thecriticalcritics.com/review/wp-content/images/mid-noad.jpg" class="img-fluid" />
        </footer>
    </div>

    <a href="http://www.example.com" target="_blank" class="side rightTower">
    </a>
</div>

Answer 1

Используя предложение 04FS и зная ширину моего центрального столбца и боковых изображений, я смог решить проблему с помощью чистого CSS и функции calc () в свойстве background-position.

По сути, возьмемширину центрального столбца и бокового изображения, разделите сумму на 2 и используйте 50% в функции calc (), чтобы получить желаемое расположение и поведение боковых изображений.

Обратите внимание на селекторы класса leftTower и rightTower

Ниже приведен код и рабочий код

CSS

html, body {
    height: 100%;
    margin: 0;
    background-color: black;
    font-family: Verdana;
}

.wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: #000;
    height: 100%;
}

.leftTower {
    background-attachment: fixed;
    background-position: calc(50% - ((728px + 450px) / 2)) top;
}

.rightTower {
  background-attachment: fixed;
  background-position: calc(50% + ((728px + 450px) / 2)) top;
}

.side {
    min-height: 775px;
    flex-grow: 1;
    background-repeat: no-repeat;
    background-image: url("https://www.plaseebo.net/news/wp-content/uploads/2019/01/moonlight_gnaw_x_c-450x775.jpg");
}

.content {
    max-width: 750px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}


.mainContent {
  background-color: #00ff00;
  flex: 1;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.text-center {
  text-align: center;
}

@media only screen and (max-width: 750px) {
  .side {
    display: none;
  }
}

HTML

<div class="wrapper">
  <a href="http://www.example.com" target="_blank" class="side leftTower">
  </a>

  <div class="content">
    <header class="text-center">
      <img src="https://i.pinimg.com/originals/57/27/d7/5727d7e809ed08fb9cbda10b1f4a5e48.jpg" class="img-fluid" />
    </header>

    <main class="mainContent text-center">
      This is the content area<br />
      <div style="height: 220px;background-color: #0000aa;color: white;margin: 0 15px 0 15px;">
        Taking up 220px of vertical space to show stick footer behavior
      </div>
    </main>

    <footer class="text-center">
      <img src="https://thecriticalcritics.com/review/wp-content/images/mid-noad.jpg" class="img-fluid" />
    </footer>
  </div>

  <a href="http://www.example.com" target="_blank" class="side rightTower">
  </a>
</div>

https://codepen.io/xcr/pen/jJyeQy