background technique

Hello Good Day.

I've recently noticed that the only way to have a long-in-width body
background image to be clipped at both sides(left and right) at low
resolutions and still visible at high resolutions(assuming it is
horizontally centered) is to, infact, make a very-long-in-width image with
what I assume would be a blank center. This approach is not very good for
bandwidth and download times for those with slow connections to the
internet. I attempted to apply some custom techniques to try and emulate
this, with no luck though.

I cut the big image into 3 pieces, the left edge, the right edge and I threw
the center blank away. I then tried something like having two div containers
on each side of the page and putting the left and right images in their
containers with negative positions to go off the screen at resolutions like
800x600 but visible at 1024x768 and above. But the problem here is that:
while the negative positioned image on the left works perfect, its the right
side image that creates a horizontal scrollbar when positioned negative off
the screen.. Why only the right side and not the left side? Perhaps you
could remove the horizontal-scrollbar effect from images that have been
deliberately positioned negative off the screen?(in this case just the right
side because the left side already works)

I took another approach, I then applied the images as backgrounds to the
containers and background-positioned the images negatively again out of the
container.. I figured I could get the Background image to flow out of the
container when I used overflow:visible, but it seems that this does not
apply to background images. Perhaps you could have the bg also apply to
overflow:visible? or make something like overflow-bg:visible?

After this did not work, I went back to the first attempt and tried applying
overflow:none to the body.. and it looks as though it would be perfect if
something like "overflow-x:none" existed. This would actually be useful in
many occasions, maybe you could look into something like "overflow-x and
overflow-y" ?

I have looked at the new recommendations for CSS3 and the multilayered
background images... but I dont think this will solve the problem Im
having.. because I'm not sure then if it will be possible to have the
background images offscreen at 800x600 resolution but still visible to
higher resolutions, since the position of 0, 0 will be at the corner of the
page and any negative positions would also be negative at high
resolutions...

Keep in mind this technique is to save download times and if I did not care
about my audience this much I would just use the full-size 760px width image
for my background. On another note, a slim image in height with a "repeat-y"
will not solve my problem either as my designs are rather complex.. and
besides "cliché" is not my style  ;)

I hope you will consider some of my recommendations.