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

Forum Moderators: not2easy

Message Too Old, No Replies

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

Sgt_Kickaxe

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.

Paul_o_b

12:50 pm on Apr 19, 2012 (gmt 0)

Hi,

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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0
}
html, body { height:100% }
body {
padding-right:50%;
background:#fff;
}
#outer {
background:#000;
min-height:100%;
}
* html #outer { height:100% }
.inner {
padding:1px 0;
margin-right:-100%;
position:relative;
zoom:1.0;
color:red;
}
p{padding:0 10px;margin:0 0 1em}
</style>
</head>

<body>
<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>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
</body>
</html>

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.

lucy24

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