Creating dynamic CSS backgrounds that scroll horizontally

Styling with CSS

    #container {
        min-width: 800px;
        max-width: 1000px;
        height: 100%;
        margin: 0 auto;
        text-align: left;
    }
    #left-section {
        height: 100%;
        position: relative;
        float: left;
        width: 20px;
        background: #FFF url('img/bodybg_left.jpg') repeat-y left;
    }
    #right-section {
        height: 100%;
        position: relative;
        float: right;
        width: 20px;
        background: #FFF url('img/bodybg_right.jpg') repeat-y right;
    }

Markup in HTML

<div id="container">
  <div id="left-section"><!-- LEFT SECTION //--></div>
  <div id="right-section"><!-- RIGHT SECTION //--></div>
  <table id="content">
     ...
  </table>
  <div style="clear: both;"></div>
</div>

The left and right sections are visible on the initial screen view. However, when the table extends beyond the viewport's height (greater than 100%) and I scroll down, the backgrounds do not show below the initial viewport. Is there a CSS solution to address this issue or should I consider using an HTML table? I experimented with setting the position of the background sections to fixed but it did not work as they need to be relative to the dynamic width of the wrapper.

Best regards, Ben


Solution: Try the following CSS or review other answers!

CSS Modifications

    #container {
        min-width: 800px;
        max-width: 1000px;
        min-height: 100%;
        height: 100%;
        margin: 0 auto;
        text-align: left;
        background: url('img/bodybg_left.jpg') repeat-y left;
    }
    #left-section {
        background: url('img/bodybg_left.jpg') repeat-y left;
        min-height: 100%;
    }
    #right-section {
        background: url('img/bodybg_right.jpg') repeat-y right;
        min-height: 100%;
    }
    #content {
        width: auto;
        margin: 0 20px;
        border-collapse: collapse;
        border-top: 1px solid #000;
        min-height: 100%;
    }

HTML Markup Changes

<div id="container">
  <div id="right-section"><div id="left-section">
    <table id="content">
      ...
    </table>
  </div></div>
</div>

Answer №1

Initially, my answers were rushed and ineffective.

This time, I took the time to do it properly, incorporating two background-image.

Live Demo (edit)

CSS:

html, body {
    margin:0; padding:0; border:0;
    height: 100%
}
#wrapper {
    min-width: 800px;
    max-width: 1000px;
    min-height: 100%;
    margin: 0 auto;
    text-align: left;
    position: relative
}
#wrap-left, #wrap-right {
    position: absolute;
    width: 100%;
    height: 100%;
}
#wrap-left {
    background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Color_icon_blue.svg/250px-Color_icon_blue.svg.png') repeat-y top left
}
#wrap-right {
    background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Color_icon_red.svg/250px-Color_icon_red.svg.png') repeat-y top right
}
#content {
    position: relative
}

HTML:

<div id="wrapper">
    <div id="wrap-left"></div><div id="wrap-right"></div>
    <table id="content">
        <tr><td>fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg<br />fdgdg (This content has been modified for uniqueness)
        </td></tr>
    </table>
</div>

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

Scrolling container embedded within a parent with absolute positioning

I have encountered a tricky situation with an absolute positioned div and its nested div having overflowing content. My goal is to enable vertical scrolling for the child div, however, my attempts so far have been unsuccessful. The challenge here is that I ...

Choose a dynamically generated html element without having to click on it

I've been looking for a way to target a dynamically-generated element (specifically a div with the class "date") using jQuery. While I keep finding references to the .on('click') method, it appears that this only selects the div once the pag ...

displaying a separate HTML file with its own distinct CSS styling

Recently, I was tasked with investigating an existing website. Currently, the website utilizes a single root html file that contains multiple iframes linking to external html pages. However, the team behind the website has noticed that this setup is causin ...

Displaying a pop-up window containing information retrieved from the console output

Upon user input in the form on my web application, an scp and ftp process is initiated that takes around 2-3 minutes to complete. The result page consequently experiences a similar delay in loading. To enhance user experience and provide real-time updates ...

The positioning of the input element within the div is set to

Currently, I have a container div for textbox (div.tb) with position:relative. Inside this div, there are input and placeholder divs, both of which have position:absolute. The issue lies in the fact that while the input text is vertically centered, the pl ...

What is the best way to arrange the second div in the second row, while the first and third div are displayed on the first row within the MUI appbar

I have 3 components in the appbar, 1. Logo 2. Search Input 3. Login Buttons When viewing on desktop, all three components will be in a single row as shown below https://i.stack.imgur.com/FYMEH.png Below is my code snippet: export default function NavBar ...

Challenges with Internal Styling on Wordpress Sites

Okay. I've been dealing with some internal style issues on my Wordpress website. After dedicating hours to trying to change styles for various elements, I realized that the main html file contained a bunch of internal style sheets that were overridin ...

Selection menu drops down once the save is complete

I have two drop-down menus named source and campaign, displaying data from the database. In addition to these drop-downs, there are other input fields as well. My concern is that I want to save the filled data along with the selected options in the drop-do ...

Having trouble interacting with an element using Selenium in Python

I am trying to figure out how to download an image from Instagram, but I cannot seem to programmatically click on the download button of this page. Even after attempting to use XPath and CSS selector methods for clicking, unfortunately, neither seems to w ...

Steps to modify the background color of an IconButton upon clicking in Material UI

After clicking on the IconButton, the background color changes to an oval shape. I now need to modify the background color when it is clicked. CSS The CSS code for the IconButton changes the background color upon hover. I require a similar effect for the ...

Creating a unique-looking visual representation of progress with arcs

Looking to create a circular progress bar (see image below), with loading starting from the left bottom side up to the right bottom side. The empty state should be light-blue (#E8F6FD) and the progress color strong blue (#1CADEB). https://i.sstatic.net/VZ ...

Creating a spacious text box for an enhanced Ajax search feature

I'm currently working on an AJAX application that allows users to input the name of a movie, and then loads results from the database through jquery using a PHP API. However, I'm facing a challenge in implementing a text box with the following re ...

Is there a way to accurately retrieve the width of an element within setInterval without any delay?

I'm currently experimenting with increasing a progress bar using the setInterval function. So far, it seems to be functioning properly. var progressBar = $('.progress-bar'); var count = 0; var interval = setInterval(function () { va ...

Expandable full-width JavaScript accordion for seamless navigation

Currently, I am working on a simple on-page JavaScript application that consists of multiple data pages within one main page. My goal is to create a horizontal accordion effect where clicking on headers on either side will smoothly switch between the diffe ...

Using JavaScript to implement responsive design through media queries

The code seems to be having some issues as it only works when I reload the page. I am looking to display certain code if "size < 700" and other code if "size > 699". I also tried this code from here: <script> function myFunction(x) { if ( ...

Sweetalert not functioning properly when deleting records from Datatable

I am currently working on a CRM script and encountering an issue. The customers are stored in a data table, and I am trying to implement a delete function with confirmation from both the database and the data table. I have written some code and placed it w ...

The navigation bar on the website highlights vibrant green arrows next to the

I'm having trouble implementing a bootstrap menu on my website using the code provided by Bootstrap. The menu is not displaying correctly and instead showing small green UL arrows. I have JavaScript and Bootstrap scripts in my project. Is there a way ...

When the div is loaded, automatically navigate to the crucial li element within it, such as the one with the class "import

Welcome to my first webpage: <html> <head> <script type="text/javascript" src="js/jquery.min.js"></script> </head> <body> <div id="comment"></div> <script type="text/ja ...

Utilizing Bootstrap 3: Achieving Varied Font Sizes within a Row with Bottom Alignment

Just starting out with Bootstrap and looking to create a layout with two columns of text in the same row, where the first column has a larger font size than the second. However, I'm running into an issue where the text in the second column is position ...

Implementing the Audio() Element with JavaScript

I've written the code below, but it's not working properly! When I click on the play button, nothing happens HTML: <button id="play"><img id="playicon" src="img/Polygon 1.svg"></button> JS: I have a variable named 'song0 ...