Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Half the background one color, the other half a different color

10:14 am on Apr 19, 2012 (gmt 0)

Senior Member

WebmasterWorld Senior Member sgt_kickaxe is a WebmasterWorld Top Contributor of All Time 5+ Year Member

joined:Apr 14, 2010
votes: 0

I'm looking to split a background into two colors and am having some trouble. example: I'd like the entire left side of the screen to be black and the entire right side to be white with the split straight down the middle.

Possible using just css without images? I've had some success with gradients but it's not cross-browser friendly.
12:50 pm on Apr 19, 2012 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


There are loads of ways you can do this depending on browsers support but here is a way that should work back to ie6 and beyond.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
html, body { height:100% }
body {
#outer {
* html #outer { height:100% }
.inner {
padding:1px 0;
p{padding:0 10px;margin:0 0 1em}

<div id="outer">
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec sapien nec urna mollis sagittis. Suspendisse leo eros, tempus sed convallis vitae, rhoncus ut est. Nam ut orci sapien, ac vehicula quam. Mauris blandit sodales ipsum nec ornare. Curabitur sodales augue id mauris gravida mattis. Maecenas vitae dui turpis. Curabitur commodo velit ut arcu adipiscing id scelerisque velit ullamcorper. Quisque at consectetur justo. Fusce eget ipsum justo. Sed leo nisi, pulvinar at molestie id, consectetur in lacus.</p>

You could of course just make a very wide two tone image and repeat it centrally on the body for the same effect. Make the image about 3000px wide by about 5px high and it will cater for most everyone and still be a about a quarter of 1k so filesize is not really an issue.
6:27 pm on Apr 19, 2012 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month

joined:Apr 9, 2011
votes: 244

My eyes hurt. Are you going to have the same text color running all the way across both backgrounds, or will the whole thing be structurally different, left and right?

Or did you simply say "black and white" as shorthand for "an attractive shade of blue and a slightly different but equally attractive shade of blue"? :)

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members