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.
Scenario one: An image inside of a div, absolutely positioned with negative margin and left positioning to always centre the image.
Example here: http://lateralaspect.com.au/tools/bg-problem-image-html.html
Problem: The horizontal scrollbar appears at widths less than 1750px.
Example of problem: http://lateralaspect.com.au/tools/bg-image-prob-01.jpg
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!
Scenario two: A background image applied through CSS but on a div rather than the body element.
Example here: http://lateralaspect.com.au/tools/bg-problem-image-css.html
Example of problem: http://lateralaspect.com.au/tools/bg-image-prob-02.jpg
Problem: As you shrink the window the image falls off both sides of the page, as required. However when you go smaller than the width of the content (960px) and the scrollbar appears, the image stays at the size of the window - when you scroll sideways no more image appears.
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