Блог

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

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

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

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

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>  

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

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

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

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

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