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 about 10 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 about 10 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 about 10 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 about 10 years ago by Tony B