html - Body background with 3 background colors

Question

Is it possible to have the body color as 3 different colors - I am creating a website (just for fun) based on the Scottish clubs and I was hoping to change the background color to represent the colors of the clubs ie - Rangers Red>White>Blue and Celtic Green>White>Gold

Here is an example of the 3 color -

Answer 1

Linear Gradient Approach

You can make use of linear-gradient background images like in the below snippet. Making the color stop point of one color as the starting point of the next color would produce a block like effect instead of an actual gradient like effect.

Linear gradients are supported in the recent versions of all browsers. If you want to support IE9 and lower then you may have to look at some libraries (like CSS3 PIE) or use a different approach like box-shadow (inset) or some extra (or pseudo) elements.

Horizontal Stripes:

To create horizontal stripes, an angle (or sides) need not be specified because the default angle is 0 degree (or to bottom like mentioned in jedrzejchalubek's answer).

body {
  height: 100vh;
  width: 100vw;
  background-image: linear-gradient(red 33.33%, white 33.33%, white 66.66%, blue 66.66%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0px;
}

<!-- to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>