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> 

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; } 

Answer 2

使用生成器http://www.colorzilla.com/gradient-editor与颜色停止彼此非常接近。

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