Different background color either side of page
I want to create a fixed-width layout where the background color on either side of the page is different, but with the background colours extending infinitely from either side of the page no matter how far you zoom out.
For example, I'm not looking to create a 9000x10 px image with the correct colours on either side and tiling it, as this would only work if you dont zoom out far enou开发者_如何学Gogh to see the edge of the background image.
Is this possible?
Thanks!
Edit:
I should have specified, the background should cover the full height of the page, not just the height of the window/viewport.
This seems to work:
<body>
<div id="bg-right"></div>
<!-- rest of page -->
</body>
body {
background-color: purple;
}
#bg-right {
background-color: yellow;
position: fixed;
top: 0;
bottom: 0;
left: 50%;
right: 0;
z-index: -1;
}
This works in IE7+ with both little and lots of content:
Live Demo (lots of content)
Live Demo (little content)
HTML:
<div id="left"></div>
<div id="right"></div>
<div id="container"></div>
CSS:
html, body {
margin: 0; padding: 0; border: 0;
}
body {
background: #ccc
}
#left, #right {
position: fixed;
width: 50%;
height: 100%;
top: 0
}
#left {
background: #ccc;
left: 0
}
#right {
background: #999;
right: 0
}
#container {
background: #fff;
width: 80%;
margin: 0 auto;
position: relative
}
How's this for you? http://jsfiddle.net/PNYVe/
I didn't like the height: 100%; position: fixed; solution because I wanted to leave the option open of having a background image that scrolled with the page later on. (Although I didn't think of this in writing the question.) I had a play and found min-height: 100%; to work.
<html>
<head>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
#container {
width: 100%;
min-height: 100%;
position: relative;
}
#left, #right {
width: 50%;
height: 100%;
position: absolute;
z-index: -1;
}
#left {
left: 0;
background-color: navy;
}
#right {
right: 0;
background-color: maroon;
}
#content {
width: 512px;
height: 100%;
margin: 0 auto;
background-color: white;
}
</style>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="content">
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
Hi<br />
</div>
</div>
</body>
</html>
For some reason it doesn't work in jsfiddle.net: http://jsfiddle.net/HktPN/ But it does in my browser.
using Matt example, just adding a container solves it : http://jsfiddle.net/PNYVe/3/
加载中,请稍侯......
精彩评论