Alexandru Dinulescu's Thoughts

Evening All

How many times it happend that you got a design to cut/slice from a designer only (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 curbed line in the middle, and on the left the repeating line is placed on top while on the right side it goes in the middle. Something like this:

Uneven repeating backgrounds ilustrated

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 it’s siblings you create 2 new divs, bgHelperLeft and bgHelperRight and you style them something like this

Since you used z-index: -1; then it means that it wont 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 wont 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.

Questions in comments