Geek Answers Handbook

Background color on both sides of the page

I want to create a fixed-width layout where the background color on both sides of the page is different, but with background colors expanding infinitely on both sides of the page, no matter how far you zoom out.

For example, Iā€™m not going to create a 9000x10 pixel image with the correct colors on each side and a mosaic, as this will work only if you do not zoom out far enough to see the edge of the background image.

Is it possible?

Thanks!

Edit:

I should have indicated that the background should cover the entire height of the page, not just the height of the viewport / window.

+7
source share
5 answers

I did not like the solution height: 100%; position: fixed; height: 100%; position: fixed; because I wanted to leave the option open, having a background image that scrolls from the page later. (Although I did not think about this when writing the question.) I had a game and I found min-height: 100%; for 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 does not work in jsfiddle.net: http://jsfiddle.net/HktPN/ But this happens in my browser.

+1
source

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; }
+6
source

This works in IE7 + with small and large amounts of content:

Live Demo (lots of content)
Live Demo (low 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 }
+3
source

How is that for you? http://jsfiddle.net/PNYVe/

+1
source

using Matt's example, just adding a container solves it: http://jsfiddle.net/PNYVe/3/

0
source

More articles:


All Articles