DIVs vs. Tables
Float Layouts
Inline Blocks
Block Layouts
Centering
Split Bkgrd
Graphic Borders
Horizontal Lists
CSS Colors
.htaccess
Block IPs
Down for Maintenance
Page Redirect
Custom Error Pages
Escaping query strings
PNG transparency
Google App testing
Flash Optimizing
Avoid AS Statics
SEO Optimization
Split a background color on the page
Sometimes I see requests on how to divide the page background color half and half. One half one color, the other half, another color. So here is a simple way to do it.
<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>
More details below ...
Properties to split a background
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.
Did you find this article userful for your website?
If so, why not provide a link to it? Just copy the following to your web page:
