How to horizontally fix a background using background-attachment but not vertically

Question

I have a div (#main) that has been centred to the middle of the body element. body has a horizontally repeating background image and colour, aligned to the top-left of the element. #main has a fixed width, flexible height, and its own background image and colour.

What I'm trying to accomplish, as illustrated below, is to have the background image inside #main aligned with body's background image. The two background images are going to be similar, so correct alignment is a necessity.

I attempted to use background-attachment: fixed; on #main's background image, except that obviously results in the entire background image scrolling with the page; where as I'm trying to accomplish an effect where the background of #main is properly aligned with that of the body, but only repeats horizontally, and won't follow the user as they scroll vertically.

(I tried to post this on doctype, except it won't accept my Google OpenID)

Answer 1

You can use the properties background-position and background repeat

.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 around with those css properties, I am confident you will achieve what you want.