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.

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

(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.