Different background color either side of page

Question

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.

Fred Nurk · Answer 1 · 2011-01-18T10:46:51.077

7

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;
}

edited Jan 18 '11 at 10:46

answered Jan 18 '11 at 10:31

Fred Nurk

13,952
4
37
63

This seems to work, but you should note that `position:fixed` isn't supported in IE6 – Dan Jan 18 '11 at 10:36
This has an issue where you can see `1px` of the purple background where there should be yellow. (depends if the viewport width pixel count is even or odd) (testing in Chrome) – thirtydot Jan 18 '11 at 10:40
@thirtydot: That seems to be fixed now. – Fred Nurk Jan 18 '11 at 10:47
@Fred Nurk: Yup, it's fixed. I think I like your solution more because it only relies on one extra element. – thirtydot Jan 18 '11 at 10:50
@Fred Nurk: Neat, but unfortunately it doesn't work with our good friend IE. – thirtydot Jan 18 '11 at 11:01
1

I know text is a poor medium for sarcasm, but "good friend" almost made me snort coffee. – Fred Nurk Jan 18 '11 at 11:15

score 3 · Answer 2 · answered Jan 18 '11 at 10:47

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
}

score 1 · Answer 3 · answered Jan 18 '11 at 09:52

1

How's this for you? http://jsfiddle.net/PNYVe/

answered Jan 18 '11 at 09:52

Matt Asbury

5,644
2
21
29

2

if the content is large, and the vertical scroll appears, the background will not stretch to the end. example: http://jsfiddle.net/dan86/PNYVe/2/ – Dan Jan 18 '11 at 10:01
Ah, what Dan said. I need that too. :/ – Jesse Jan 18 '11 at 10:09
Just change from `absolute` to `fixed`. It seems to work that way. http://jsfiddle.net/JzTdF/ – Alin Purcaru Jan 18 '11 at 10:43

score 1 · Accepted Answer · answered Jan 20 '11 at 11:04

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.

score 0 · Answer 5 · answered Jan 18 '11 at 10:29

0

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

answered Jan 18 '11 at 10:29

NicolaPasqui

1,112
8
17

This solves the issue of having too much content. But try deleting some of the contents, the background will shrink to the size of the content, and won't fill the whole page xD – Dan Jan 18 '11 at 10:33

Different background color either side of page

5 Answers5