Menu
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 enough 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.
722
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
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
