CSS for 2 background colors

[RaptorRex]

I've seen this requested a few times. How can someone have 2 background colors split down the middle. The technique here is to use z-index to create a layer of backgrounds then make a new writing canvas as a top z-index onto which you build the actual web page. Here is the code:

<html>
<body style='background-color: red; margin: 0px; height: 100%;'>
<div style='position: fixed; top: 0; left: 0; width: 50%; height: 400%; background-color: yellow; z-index: 1;'></div>
<div style='position: absolute; top: 0; left: 0; z-index: 2; width: 100%;'>
To have a web page background be half one color and half another color. Great for a two-tone look.
</div>
</body>
</html>

This example lays down a solid red body background then puts a 50% wide yellow div over top of it. Then over top of all, it makes the new writing canvas.

A few notes:
- you need to set <body> height so that height of elements within <body> can be relative to something.
- the yellow div has height: 400%. This needs to be big enough to exceed the content on the writing canvas. Play with it in explorer (with a HTML4.01 doctype)...you'll see what I mean.
- the last div uses "position: absolute". "fixed" should work just as well but does not in IE. But "absolute" does.
- z-index is the key

See example at: http://upwithabang.com/articles/example4/split-background.html

It is worth noting that this method of creating a layer to be a new writing canvas (overtop of everything else) allows backgrounds to be as complex as you want.

 

[MJ]

Ooo! I like this alot. Its great how the deviding line is always in the middle too if you resize it. The reason I like this alot is because it gives the illusion of frames (right and left) but its one page!! Great code thanks!

 

[mee2k7]

Great code thanks!

 

[wasiflaeeq]

Gr8 Code

 

[halishas]

tnx it nice very ty