Multiple Backgrounds: Left Half and Right Half

Published by Chris Coyier

Hey! This article is pretty old. We revised it here which includes much better information.

Example of left and right layout with differnet backgrounds

The introduction of the brand-new CSS-Tricks forums the last few days has been great! It was worried it would take a while for it to catch on, but the last few days there have been about 150 posts in lots of great topics.

One of those great topics was John Steven's background challenge:

I'm standing before a challenge and because to celebrate this new forum, I like to ask you to inspire me on this issue. We need a background 100% wide but what goes into a different pattern on 50% of the screen. The idea of making background image that is for example 2500px wide and repeat-y is not what I'm looking for.

My first thought was to create 2 divs, a leftHalf, and a rightHalf:

#leftHalf {
   background: url(images/bg-1.jpg);
   width: 50%;
   position: absolute;
   left: 0px;
   height: 100%;
}
#rightHalf {
   background: url(images/bg-2.jpg);
   width: 50%;
   position: absolute;
   right: 0px;
   height: 100%;
}

This works, but it has one "small" (literally) problem. When the browser window is at a width of an odd number of pixels, there is no even 50% split of that number and you get a tiny stripe of white down the middle in between the two divs.

John himself suggested the perfect tweak to this solution, which solves that. Instead of a leftHalf, just apply that background image to the entire body element. This solves the white stripe problem and uses less markup as well!

View Demo

(yes, the left half's pattern doesn't line up quite right, but it's the theory here that counts!)