| | |||||
| ||||||||
| Webmaster Tutorials Instructional webmaster-related how-to's and tutorials. |
![]() |
| | LinkBack | Thread Tools |
| | THREAD STARTER #1 (permalink) |
| 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. |
| |
| | #2 (permalink) |
| 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! |
| |