What's the best way to have two different background colors? Like a white background with a light-blue strip down the middle?

4 answers

3
points

For this I'd use a background image. I'd create a small background image that is the width of the strip down the middle, and about 10px high. I'd then set the CSS of the <body> element to be something like:

body {
    background-image: url(/blue-strip.png);
    background-position: top center;
    background-repeat: repeat-y;
    background-color: #fff;
}

That will center the blue strip image in the middle of your page, and repeat it vertically. By also the background color of the <body> element to be white, you achieve the second background color.

Answered over 7 years ago by Paul Farnell
2
points

Simplified version of Paul's answer:

body {
    background:url(/images/blug-string.png) top center repeat-y #fff;
}

All in one nice line. The blue-string.png would be 1px wide and as little as 1px high (since it's just going to be repeated).

Answered over 7 years ago by Darryl Hein
PaulBM 103
0
points

Set the body background-color to white and then add a div tag with a light blue background color. Then set the div's margin to auto and a suitable width to allow the white to show at the sides. Or you create a background image only a couple of pixels high with the white and blue bands. Then use CSS on the body background-repeat:repeat-y; to repeat the images all the way down the page.

Answered over 7 years ago by PaulBM
Tony B 86
0
points

Keep in mind that the background image will go the full height of the browser window if you have it as the background image for the body.

Answered over 7 years ago by Tony B