- Impact
- 3
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.
<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.
very ty
