How to horizontally fix a background using background snap, but not vertically

Question

I have a div ( #main ) that was centered until the middle of the body element. body has a horizontally repeating background image and a color aligned to the left edge of the element. #main has a fixed width, flexible height, and its own background image and color.

What I'm trying to accomplish, as shown below, is to make the background image inside #main background image of body . The two background images will be similar, so proper alignment is a must.

I tried using the background image background-attachment: fixed; on #main , except that, obviously, it scrolls the entire background image from the page; where, when I try to perform the effect, when the background #main correctly aligned with the background body , but only repeats horizontally and will not follow the user when they scroll vertically.

Demo http://img163.imageshack.us/img163/2783/bgfixedexample.png

(I tried posting this on doctype , except that it would not accept my Google OpenID)

Answer 1

You can use the background-position and background repeat properties

 .myClass { background-image:url(myimg.png); background-repeat:repeat-y; background-position: -5px 5px; /* Any percentage or pixel value you want or you can use center top etc.*/ } 

Play with these css properties, I'm sure you will get what you want.