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 -

Solution 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>

Vertical Stripes:

To create vertical stripes, you need to either mention the angle (90deg) as the first parameter for the gradient (or specify to right meaning the gradient goes from left of the screen to the right).

body {
  height: 100vh;
  width: 100vw;
  background-image: linear-gradient(90deg, 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>

---

Box Shadow Approach with Viewport Units

You can make use of inset box-shadow along with viewport units also to produce the striped effect with just a single element. This would be supported by even IE9 because both box-shadow and viewport units are supported.

Horizontal Stripes:

To create horizontal stripes, the Y-axis offset of the box-shadows should be assigned in equal splits. Here we use 33.33vh, 66.66vh and 99.99vh because there is only a 3 color split.

body {
  height: 100vh;
  width: 100vw;
  box-shadow: inset 0px 33.33vh 0px red, inset 0px 66.66vh 0px white, inset 0px 99.99vh 0px blue;
  margin: 0px;
}

Vertical Stripes:

This is very similar to the approach for creating horizontal stripes except for the fact that here we change the X-axis offset of the box-shadow.

body {
  height: 100vh;
  width: 100vw;
  box-shadow: inset 33.33vw 0px 0px red, inset 66.66vw 0px 0px white, inset 99.99vw 0px 0px  blue;
  margin: 0px;
}

---

Pseudo Element Approach

This approach has the highest browser support because it doesn't use viewport units and pseudo-elements with a single-colon syntax are supported even by IE8. However, the drawback of this approach is that if you need a split of 4 or more colors then extra elements would be needed.

Horizontal Stripes:

To create horizontal stripes, the pseudo elements get 33.33% height of the body whereas the width is 100%. One pseudo element is positioned on the top and the other is positioned at the bottom.

html {
  height: 100%;
}
body {
  position: relative;
  height: 100%;
  margin: 0;
}
body:before,
body:after {
  position: absolute;
  content: '';
  left: 0px;
  width: 100%;
  height: 33.33%;
}
body:before {
  top: 0px;
  background: blue;
}
body:after {
  bottom: 0px;
  background: red;
}

Vertical Stripes:

To create vertical stripes, the pseudo elements get 33.33% width of the body whereas the height is 100%. One pseudo element is positioned on the left and the other is positioned at the right.

html {
  height: 100%;
}
body {
  position: relative;
  height: 100%;
  margin: 0;
}
body:before,
body:after {
  position: absolute;
  content: '';
  top: 0px;
  height: 100%;
  width: 33.33%;
}
body:before {
  left: 0px;
  background: blue;
}
body:after {
  right: 0px;
  background: red;
}

Solution 2

Use generator http://www.colorzilla.com/gradient-editor with color-stops very close to each other.

background: linear-gradient(to bottom, #3056ff 0%,#3056ff 32%,#ff3033 33%,#ff282c 66%,#2989d8 67%,#2989d8 67%,#7db9e8 100%);

Comments

[nicael]

Why not? An absolutely positioned div with 100% height & width, filled with three divs having 100% widths and 33.34% heights.

[Derek Kennedy]

some of the clubs have 2 colors so doing it with 3 divs would mess up the layout

[light]

The obvious answer is yes. Are you referring to the case of not using extra elements, with just CSS on body?

[Derek Kennedy]

yes - only using css not adding more or removing divs

[light]

And what do you mean by 3 different colors? Vertical stripes? Repeating? Or just 3 "equal blocks"? Vertical/horizontal?

[nicael]

"some of the clubs have 2 colors so doing it with 3 divs would mess up the layout" - okay, make it two for some clubs? There's no universal CSS for any clubs, considering that any of them also have different colors.

[Derek Kennedy]

2 or 3 equal colors (i will have the info in divs with a light color background like cream)

[Derek Kennedy]

ive put an exmple of a 3 color background (not exact color but for layout example)

[Harry]

+1 I think we have actually posted very similar answers at the same time (no accusations whatsoever, just a statement). Coming to the gradient itself you can make the stop point of one color as the start point of the next (instead of as 32% stop and 33% start) to avoid even the small gradient like change over of colors :)

[Paulie_D]

I assume you mean color-stops and not keyframes