CODEWITHSUNDEEP
htmlcssflexboxbackground-attachment
xcr
xcr

Reputation: 97

Trouble with 3 column layout with outside elements/columns having background-attachment: fixed

I'm really close to what I want, a 3 column layout where only the center content scrolls via the normal scrollbar.

My problem is the outside images/cols have background-attachment: fixed, which works, but I am so far unable to position the background images like I want.

The only way I have been able to make it work is by positioning the left one to the left and right one to the right (which is opposite of what I'm looking for). This makes the images spread as wide as possible as you widen the page, I would like to keep them tight and have their outside edges overflow when the page is width is lowered.

I can better show my desired effect with examples.

1.) This one has the background image scrolling fixed, but as the page widens, instead of hugging tight to the content in the center they move to the outsides. As they overflow, they do so to the insides - I'm looking for the opposite of these two behaviors.

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

2.) This one below works perfectly except the background images aren't fixed and scroll with the content

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

The only difference in these examples should be the background-position and background-attachment properties in the CSS.

The html & css in the first example (close to working) is 

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>

Upvotes: 0

Views: 79

Answers (1)

xcr
xcr

Reputation: 97

Using 04FS's suggestion and knowing the width of my center column and side images I was able to solve the issue with pure CSS and the calc() function in the background-position property.

Basically, take the width of the center column and the side image, divide the sum by 2 and use 50% in the calc() function to get the desired positioning and behavior of the side images.

Note the leftTower and rightTower class selectors

Below is the code and a working 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

Upvotes: 0

Related Questions