Why would background-attachment:scroll not work?
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 th开发者_StackOverflow社区e 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.
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
try this: http://jsfiddle.net/mnnue/
(basically what Guffa was saying)
i added a .bg-image div to the template div, and positioned it below the content using z-index. i made the width thinner to better ese the scrolling.
a link would be helpful. what i interpret to be your code is here:
http://jsfiddle.net/SebastianPataneMasuelli/pvaEM/4/
and the bg image is scrolling. can you reproduce the problem on that fiddle?
加载中,请稍侯......
精彩评论