November 27, 2008 by romuald.halasz

Hello people. Let me start by saying that I know an article is overdue. However, when work piles up, and then you add a certain amount of WoW to your free time, you have a genuine recipe for no free time whatsoever… But I have been thinking hard about the next topic so today we will discuss another cool-looking, and useful effect.

Let’s say you have a website, in which the header is centered and the background image is asymmetric. What does that mean? Well, it means that the left margin is different than the right in terms of aspect, and furthermore, it means that if you tile an image with a width of 1px (height equal to the header’s) you won’t get a correctly tiled header.

Here is an example: link

So, the first thing that comes to mind is how to get an element with two background images. Searching the internets, I found no quick solution, so here is my way of solving this problem:

Having two tile-images (left and right), both with a 1px width, we can make two divs that overlap and on top of them, the header. Well, that seems simple enough, and it really is. Here is how to do it:

1. You make one div with a width of 100% (width of the page), and the height equal to that of the header, also with the background image created using the first column of pixels from the header background. This is how you would normally go about making an symmetric header.

2. Make a div with a width of 50% (half of the page’s width), same height and a background image created using the last column of pixels from the header image. This div has another property unlike the first one, it has the margin-top property equal to the negative height of the header. Now we’ll have two divs that seem to have a 50% width next to each other.

3. Finally, we add the header div, width the same margin-top property of the second div.

And here we have it! An asymmetrical header that tiles on both sides. This technique can be used also to tile the footer. If you want to tile the content div this way, you need to take into account the fact that its height can vary. This means that you have to modify the height of the left and right divs to match the height of the content. Some simple Javascript code can do the trick.