The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

would padding applied to the internal edges not force the repeat to stay clear by 1em?

or could you not make your background image the full width of the window but leave a white border 12px wide on the left and right, repeat-y:repeat and as dave said use a top and bottom margin to achieve the white space

would padding applied to the internal edges not force the repeat to stay clear by 1em?

Nope, the structure of the box-model dictate that the background-image would ignore the padding and only content would be affected by the padding hence only margin or border would affect the background image.

Originally Posted by james_littler

or could you not make your background image the full width of the window but leave a white border 12px wide on the left and right, repeat-y:repeat and as dave said use a top and bottom margin to achieve the white space

If it needs to repeat-y; then presumably the height will be dictated by the content. For something like this the best approach would be to add an extra div nested inside with a 1em top-margin.

When you repeat a background image it is repeated along the axis described but it is repeated in both directions. So if you say repeat-y then the image is repeated along the y-axis in both direfctions (up and down.) If you specify no position for the image then it starts at the top and work downwards. However if you specify a position of 1 em (as in your example) the the image is first placed at the 1 em position and then it is repeated up and down in both directions along that axis.

I hope that explains what's going on for you. As Dave said above you will have to nest another container to make some sort of gap or use another element to cover up what you don't want to see.