Body Background With 3 Background Colors

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

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 --><scriptsrc="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 --><scriptsrc="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 0px33.33vh0px red, inset 0px66.66vh0px white, inset 0px99.99vh0px 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.33vw0px0px red, inset 66.66vw0px0px white, inset 99.99vw0px0px  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, #3056ff0%,#3056ff32%,#ff303333%,#ff282c66%,#2989d867%,#2989d867%,#7db9e8100%);