upwithabang web designer resources

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.


del.icio.us icon

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.

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 bkgrd colors in CSS
</a>

Share this:  del.icio.us icon