Donation?
Yes, it is better than ads and it's optional.
If this site has helped you please consider
remunerating an amount you deem appropriate.
Split a background color on the page
Sometimes I see requests on how to split a page background color half and half. One half one color, the other half, another color. So here is a simple way to do it.
<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>
See example page
Properties to split a background
- <body style='margin: 0px; z-index: 0;'>
- margin ensures the color DIVs used later are pushed right to the edge of the browser window. height: 100%; is useful for the first DIV block discussed below:
- The first DIV block
- This block covers half the background color of the body. position: fixed instructs the browser to take the block out of normal page flow and just let it sit at position 0,0. z-index: 1 ensures the block is on top of the body but below the next div block. In IE it may be helpful to specify a height that is greater than 100% in order to ensure the color extends down to the bottom of your web page.
- The second DIV block
- The second DIV block is your writing canvas. It establishes a full page on which to build your web page that is over top of the half/half background colors. z-index: 2 is the key line that places on top of everything else. Notice position: absolute;. "fixed" should work just as well but does not in Internet Explorer in some cases.
This example just shows how to have 2 background colors but there isn't any reason you can't squeeze in a few more background colors using the z-index property.
If so, why not provide a link to it? Just copy the following to your web page:
<a href='http://upwithabang.com/articles/css-split-background-color.html'>
2 bkgrd colors in CSS
</a>
Share this: