CSS for 2 background colors

RaptorRex · 10-28-2007, 02:38 AM

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:
????: NamePros.com http://www.namepros.com/webmaster-tutorials/389408-css-for-2-background-colors.html

<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/exam...ackground.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 · 10-30-2007, 02:15 PM

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 · 11-01-2007, 01:17 AM

Great code thanks!

wasiflaeeq · 01-06-2008, 11:32 PM

Gr8 Code

halishas · 01-19-2008, 11:29 AM

tnx it nice

very ty

10-28-2007, 02:38 AM	THREAD STARTER #1 (permalink)
RaptorRex NamePros Member Join Date: Dec 2004 Posts: 93	CSS for 2 background colors 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: ????: NamePros.com http://www.namepros.com/webmaster-tutorials/389408-css-for-2-background-colors.html <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/exam...ackground.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.

10-30-2007, 02:15 PM	#2 (permalink)
MJ Senior Member Join Date: Jul 2007 Location: Tucson AZ Posts: 1,241	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! __________________ Wii Sucks - Wii Fansite Tucson Dog Training San Angelo TX

11-01-2007, 01:17 AM	#3 (permalink)
mee2k7 Account Suspended Join Date: Oct 2007 Location: www.Affifind.com Posts: 55	Great code thanks!

01-06-2008, 11:32 PM	#4 (permalink)
wasiflaeeq Account Suspended Join Date: Aug 2007 Posts: 168	Gr8 Code

01-19-2008, 11:29 AM	#5 (permalink)
halishas NamePros Member Join Date: Jan 2008 Posts: 81	tnx it nice very ty

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)