Having difficulty implementing a 3 column layout with external elements/columns that have a fixed background attachment

Having a 3 column layout where only the center content scrolls with the normal scrollbar is my current goal.

I've encountered an issue with the background-attachment: fixed property on the outer images/columns. While it works, I'm struggling to position the background images as desired.

So far, I've managed to get it to work by positioning the left image to the left and the right image to the right, but this is not the effect I'm aiming for. I want the images to remain tight and overflow at their outside edges when the page width is reduced.

I can provide examples to better illustrate my desired outcome.

1.) The first example has a scrolling fixed background image, but as the page widens, instead of staying close to the center content, they move towards the outsides. When they overflow, they do so towards the inside - I'm looking for the opposite behavior.

Example 1

2.) The second example works perfectly except that the background images are not fixed and scroll along with the content.

Example 2

The main difference between these examples lies in the background-position and background-attachment properties within the CSS.

The HTML & CSS code for the first example (which is close to working) is as follows:

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>
htmlcssflexboxbackground-attachment

Answer №1

Upon following 04FS's recommendation and considering the width of my main column and side images, I successfully resolved the issue using only CSS and the calc() function within the background-position property.

The solution involved obtaining the widths of the main column and side images, dividing their sum by 2, and utilizing 50% in the calc() function to achieve the desired positioning and display behavior for the side images.

It is important to take note of the leftTower and rightTower class selectors for this implementation.

Below is the CSS code snippet along with a functional demonstration on 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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The DIV with looping functionality is not maintaining the table structure from the previous view

I have a table with a lot of ordering details. However, when I try to add a product from the admin page, the original table structure works fine. But as soon as jQuery adds an extra DIV to expand the table, I encounter issues. Can anyone suggest a jQuery m ...

phpjqueryhtml

What is the process for extracting HTML code from a URL in a web browser?

Is there a way to view HTML code in preview mode on a browser? similar to this example The output of the link should display as "{{ color.name }}" ...

htmlangularjs

Minimize/Maximize Selection Options (optgroup)

Check out the example plnkr I created: Plnkr I'm curious to know if there's a way to make the bold labels expandable and collapsible. I've been experimenting with different methods, but haven't found a solution that allows me to only d ...

javascriptjqueryhtmlangularjsselect

Styling with CSS to create a division that appears below another

I am working with HTML code that looks like this: <div class='box'> <div class='left'>content left</div> <div class='right'>content right</div> </div> Now, for smartphone devices, ...

jqueryhtmlcss

Styling React tabs using Material UI CSS

Here is an image of the screen I've developed with React Material UI tabs: https://i.sstatic.net/suzmB.png The screen features two tab headings: Contribute component and Contribute idea. I am looking to reduce the size of these buttons without affect ...

cssreactjsmaterial-ui

Modifying Blocks in Prestashop: A Step-by-Step Guide

I'm looking to make some changes to the "categories" block in my left navigation column. Currently, it appears like this: https://i.sstatic.net/MpUD5.png I would like it to look like this by default: https://i.sstatic.net/fJTr8.png Here are the mod ...

cssprestashop-1.6

Having trouble getting the pagination bootstrap class to work properly? Here are some tips to help

Here is a portion of my pagination code utilizing Bootstrap. However, the styling properties of Bootstrap do not seem to be applied. What should I do? <ul class="pagination" > <?php // if($page_no > 1){ echo "<li>& ...

htmlcsstwitter-bootstrap

Using Javascript to attach <head> elements can be accomplished with the .innerHTML property, however, it does not work with XML child nodes

Exploring new ways to achieve my goal here! I want to include one JS and one jQuery attachment for each head section on every page of my static website. My files are: home.html <head> <script src="https://ajax.googleapis.com/ajax/libs/jquer ...

javascriptjqueryhtmlxmldom

Jquery is incapable of eliminating a div

I have a form where I am dynamically adding actions. Within a table, there are rows of positions that applicants have applied for. When users click on the offer position button, I want to insert offer fields for submission and updating. While I can success ...

javascriptjqueryhtmlcss

Capture screenshots of the web page URLs within the Chrome browser by utilizing PhantomJS

Looking for a way to capture screenshots of various URLs and display them in the Chrome browser using PhantomJS. How can I achieve this? Any assistance would be greatly appreciated, as nothing is currently showing up on the webpage. This is how my code a ...

htmlphantomjs

After my jQuery functions are executed, my CSS rules are loaded

Struggling with the communication between CSS and jQuery, I find myself torn. In CSS, my rules are often very specific, like this: div#container > div#contentLeft { //Code here } However, when I add jQuery to spice up my site, the CSS rules seem to ...

javascriptjquerycss

utilize bootstrap to align text at the end of columns within a row

How can I use Bootstrap 5 to arrange a div and a canvas in a row until the md breakpoint? I want the canvas to align immediately after the text ends, currently each part has equal width. Is there a way to remove the unused space from the div? https://i. ...

htmlcssbootstrap-4bootstrap-5

The C# string operator does not seem to be functioning properly within HTML due to some encoding issues

A website built on Django 3.2 and Visual Studio 2019 requires transferring the link description text as a string in the HTML code. Despite the presence of special HTML codes such as &#10; and &#13; for line feed and carriage return, they do not pro ...

htmldjangostringhyperlinkline-breaks

Attempting to style the <img> tag with CSS, however, no changes are being applied

I have implemented expand/collapse functionality to a table using jQuery and I am now working on adjusting the button positioning with CSS. However, I am having trouble targeting the img element. Take a look at this snippet from my code: <body> &l ...

jquerycssimage

Box-Shadow malfunctioning on Mozilla Firefox

My CSS code is not displaying the shadow effect in Mozilla Firefox: body { text-align: center; font-family: Sans-serif; background-image: url("d3.jpg"); background-repeat: no-repeat; background-attachment: fixed; background-size: c ...

cssmozillashadowbox-shadow

disable the button border on native-base

I'm attempting to enclose an icon within a button, like so: <Button style={styles.radioButton} onPress={() => { console.log('hdjwk'); }}> <Icon ...

javascriptcssreactjstypescriptreact-native

Preventing multiple clicks by toggling the HTML tag on and off

Here is the jQuery structure that I am currently working with: $(document).on('click', '.view-details', function () { $(this).prop("disabled", true); // API call1 // API call2 // API call3 $(this).prop("disabled" ...

javascriptjqueryhtmlcss

Tips for retrieving user input from an HTML form and using it to make an Axios POST request

I am facing an issue with sending a post request to my API using axios. A user enters an email and password in a html form, but when the request is sent, the body of the request appears to be empty based on the chrome dev tools. I am struggling to extract ...

htmlnode.jsvue.jsaxios

The CSS menu appears more compact when viewed on a different page

Recently, I've been working on a website for practice and decided to include a menu. It functions perfectly on the first webpage, but appears slightly smaller on the second one. Here's the code snippet I used for the menu on the initial page: &l ...

htmlcssmenu

Having trouble getting event modifiers to work in Vue when added programmatically

Trying to dynamically add events using v-on through passing an object with event names as keys and handlers as values. It appears that this method does not support or recognize event modifiers such as: v-on=“{‘keydown.enter.prevent’: handler}” T ...

javascripthtmlvue.jseventsevent-handling