Works fine in IE6, though in Safari, Firefox, and Opera, the bg inside this div doesn't scroll.... so weird!


http://www.falanja.com/test.php

<style type="text/css">
	div {
		width:200px;
		height:50px;
		overflow:auto;
		background:url(images/spreadsheet/column.gif) scroll;
	}
</style>
<div>
	test<br />
	test<br />
	test<br />
	test<br />
	test<br />
	test<br />
	test<br />
	test<br />
</div>

I want the BG to scroll along.... what did i do wrong?

I don't think you did anything wrong. I think the background attachment is meant to work on the body, but not on other elements.

If you add apply the css you have for the background image and the scroll on the body it does work. The image scrolls with the body.

body {background:url(images/spreadsheet/column.gif) scroll;}

I don't know this is supposed to work the way you're thinking when the scrolling is through the overflow property. I'm not 100% sure, though.

You might need to set this up with an iframe instead of through a div.

Hello, there is no way to solve your issue using css.

IE7 incorrectly scrolls the background of a text input or a textarea when overflow is entered or when the attached scrollbar component is used.

/////////////////////////////////////////////////////
The CSS2.1 specification states (from http://www.w3.org/TR/CSS21/colors.ht...und-attachment):

"If an element has a scrolling mechanism (see 'overflow'), a 'fixed' background doesn't move with the element, and a 'scroll' background doesn't move with the scrolling mechanism."
//////////////////////////////////////////////////////////
.
.
.
What that mean is that IE is displaying and doing the wrong thing. Which is why it only works in IE. Firefox etc... upholds the css standards and displays the data properly.

You can't have a scrolling background inside a scrolling element such as a text area or even a block, inline-block etc... You can however make your ENTIRE page background scroll or stay fixed using:
background-attachment: fixed; or background-attachment: scroll;
But this applies to the body as a whole and will not scroll within a scrollable element. Except in Internet Ex. but by the time ie updates itself it will be compliant and then it won't even work in ie.



Samples:

body {
background-attachment: fixed;
}
http://www.comstarters.com/demos/no-scroll.html




body {
background-attachment: scroll;
}
http://www.comstarters.com/demos/scroll.html




If you want a scrollable background in a scrollable element I would suggest looking for a javascript snippet. There may be one out there that can do such a task, but again as far as css it looks bleak my friend.

vangogh is right. And an iframe would probably be the easiest way to do that instead of trying to find a javascript out there.