Animation


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.

<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 Sample Page

 

More details below ...


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.

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:

<a href='http://upwithabang.com/articles/css-split-background-color.html'>2 background colors in CSS</a>