Problems with "background" images applied in divs not body
I have two different scenarios that throw up two different issues, I've been racking my brains trying to think of solutions but I can't come up with anything. It could be that I'm missing something obvious, or it could be that it's a bit of a challenge. I've made a couple of really simplistic examples so the code/issues can be easily seen.
The behaviour I want is for the image to fall off both sides of the page equally, with no scrollbar - as would happen with a normal background image. I can't set the background image in CSS, because that doesn't fit with what I'm trying to achieve here. I don't want to use overflow-x:hidden; because I don't think that's very good usability. Any other suggestions would be welcome!
I want this image to behave exactly how a background image applied to the body element would - the image appearing when horizontal scrolling comes into play. I can't apply the image to the body element, it has to be in this div. Once again, any suggestions would be welcome if there are any!
Thanks in advance for any brain power extended this way :P
Well, in this particular instance it is because I'm styling up a Magento template, and using the page-specific class applied to the main wrapper to give each page a different background through CSS. I also want the page background to be textured, so it's convenient for that too.
Your answer gives me the solution, though - I don't need the whole image to be visible, I just want the white background to not be there for resolutions less than the content width, in which case I can set the #background div min-width:960px; and it does exactly what I want! I had a feeling it was going to be something blindingly simple . . . :P
Any ideas for Scenario one? The reason I have those specifications is that ultimately, that will use a JS image slider to display more than one image, so I really need it set up that way (unless there's a solution out there I don't know about).