How many times it happened that you received a design to cut/slice from a designer (or you yourself are a designer), only to find out that the background of the PSD is unequal on both sides? For example: You have a curveed line in the middle, on the left the repeating line is placed on top, while on the right side it goes in the middle. Something like this:

[caption id="attachment_323" align="aligncenter" width="545" caption="Uneven repeating backgrounds ilustrated"][/caption]

Notice the marked areas. Well, I found a pretty awesome and easy to implement solution.

You slice the marked images and you do the following -- when you have your main page container, as its siblings you create 2 new divs, bgHelperLeft and bgHelperRight, and you style them something like this:

.bgHelperLeft { position: absolute; z-index: -1; width: 50%; top: 0px (or where your background is); left: 0px; background-image: .. background-repeat: repeat-x; background-position: top left;} .bgHelperRight { position: absolute; z-index: -1; width: 50%; top: 0px (or where your background is); right: 0px; background-image: .. background-repeat: repeat-x; background-position: top left; }

Since you used z-index: -1; then it means that it won't overlap any of your center images. Absolute positioning means that it will stay there, and those widths means that they will meet BEHIND your center area so the user won't see the binning point -- all creating a cursive flow from one side of the screen to the other side of the screen.

It works on all major browsers, so this is a good trick to know and have in the book.

Leave any questions in the comments!