homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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

WebmasterWorld Senior Member sgt_kickaxe us a WebmasterWorld Top Contributor of All Time

Msg#: 4442918 posted 10:14 am on Apr 19, 2012 (gmt 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.



10+ Year Member

Msg#: 4442918 posted 12:50 pm on Apr 19, 2012 (gmt 0)


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.


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

Msg#: 4442918 posted 6:27 pm on Apr 19, 2012 (gmt 0)

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"? :)

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved