Adding more than one color to body background?

Question

Lets say i add body background color like this:

body{
   background-color: blue;
}

What if i want to have half of body blue and other half as red.

Answer 1

It depends, if you want a fading effect then something like

background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , blue); /* Standard syntax */

should work. Otherwise if you want exactly half red and half blue then:

background: linear-gradient(to right, blue 50%, red 50%);

should work as well. Make sure to add every compatibility as showed in the first few lines of css. The first argument allow you to specify the direction ("to right" means that the color will change going from left to right, so 50% blue first then 50% red).

Hope it helps =D

Answer 2

You could do this

background: linear-gradient(to bottom, blue 50%, red 50%);

For full browser support you'll need to also include the following

background: -moz-linear-gradient(top, blue 50%, red 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,blue), color-stop(50%,red));
background: -webkit-linear-gradient(top, blue 50%,red 50%);
background: -o-linear-gradient(top, blue 50%,red 50%);
background: -ms-linear-gradient(top, blue 50%,red 50%);