CSS repeating colors in background

I want my site to have repeated colors in the background, but I don't want to use images

for example the background can be
red, white, red, white, repeated horizontally

is it possible to do

body {
  background-color: red, white;
  background-repeat: repeat-x;
}

html {
    height: 100%;
}

body {
    height: 100%;
    background: repeating-linear-gradient(90deg,blue 0%, blue 25%, green 25%, green 50%,red 50%,red 75%,yellow 75%,yellow 100%);/*Explanation below*/
}

#content {
    position: relative;
    z-index: 2;
    padding: 30px;
    text-align: center;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

<div id="content">
    <p>This is some content.</p>
</div>

Explanation

Example 1

lets say we have 4 colours [a,b,c,d]
so :-
variable p=100/4=25
so we get 4*2= 8 values:

0
25
25
50
50
75
75
100

Note: first 0 and last 100 is default, each multiples of variable p is repeated twice

we put these values in same order in repeating-linear-gradient percentages

Format:

background: repeating-linear-gradient(90deg,a 0%, a 25%, b 25%, b 50%,c 50%,c 75%,d 75%,d 100%);

We can also observe that in above format end of a is start of b (25%) and end of b is start of c (50%)

if you want vertical colours remove that 90deg,

Example 2

lets say we have 8 colours [a,b,c,d,e,f,g,h]
so :-
variable p=100/8=12.5
so we get 8*2= 16 values:

0
12.5
12.5
25
25
37.5
37.5
50
50
62.5
62.5
75
75
87.5
87.5
100

Format:

background: repeating-linear-gradient(90deg,a 0%,a 12.5%,b 12.5%,b 25%,c 25%,c 37.5%,d 37.5%,d 50%,e 50%,e 62.5%,f 62.5%,f 75%,g 75%,g 87.5%,h 87.5%,h 100%);