Home/ Questions/Q 3431026
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T07:16:32+00:00

I have an absolutely positioned DIV with overflow auto. When I scroll down, the

  • 0

I have an absolutely positioned DIV with overflow auto. When I scroll down, the background clearly looks fixed, even though the default for everything on my site is scroll. It still had this behavior when I tried both ways of defining the background on the DIV:

background-attachment: scroll;
background: url() repeat top center scroll #000

Extremely lost. Thought it might be because it was absolutely positioned DIV but even when I undid that, it still failed. Problem in FF, Safari, Chrome, and IE.

UPDATE:
Here is the latest code I tried.. on the actual site the CSS is in a file that I point to in a head tag. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <body>
        <style type="text/css">
        .template-body {
          background-attachment:scroll;
          background-color:#151515;
          background-image:url("http://www.fake.com/images/2183ba03681e577511e6589e554b7a86.jpg");
          background-position:center top;
          background-repeat:repeat;
        }
        </style>
        <div class="template-body" style="position: absolute; margin: 0px; left: 332px; right: 0px; top: 93px; bottom: 0px; width: 1094px; z-index: 1; visibility: visible; display: block; background-color: rgb(21, 21, 21); height: 696px;">

          <div>
            Here lies all the content that makes .template-body scroll
          </div>

        </div>
    </body>
    </html>

Attempting to set heights in firebug on the inner/content DIV did not help in any way.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The background of the div remains fixed, as the div is not moving in any way. It’s just the content of the div that is scrolled.

    Put the background image on the content of the div instead. You can wrap the content in another div if needed.

    Edit:

    Put the background image on the inner div, so that it follows the content that is scrolling. To make the background fill the outer div even if the content is smaller, put the same background on the outer div.

    Example

    • 0