Jak podzielić background-color w 4

Question

mam ten Gr:

<div data-role="page" id="menupage"></div> 

który reprezentuje ciało stronie. I chcę zrobić tło w 4 kolorach. Wiem, jak to zrobić w 2:

#menupage { 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(
    to right, 
    #FFF 0%, 
    #FFF 50%, 
    #008DD2 50%, 
    #008DD2 100% 
); 
} 

chcę mieć coś takiego:

PS: jeśli lubisz kolory:

orange: #F26522; 
green: #BBC274; 

Can niech ktoś pomoże? Dziękuję Ci!

Answer 1

W CSS3 można zastosować multiple backgrounds.

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#menupage{ 
 
    width: 100%; 
 
    height: 100vh; 
 
    background: linear-gradient(to right, #FFF 0%, #FFF 50%, #008DD2 50%, #008DD2 100%), linear-gradient(to right, #F2651C 0%, #F2651C 50%, #BCC375 50%, #BCC375 100%); 
 
    background-size: 100% 50%; 
 
    background-position: center top, center bottom; 
 
    background-repeat: no-repeat; 
 
}

<div data-role="page" id="menupage"></div>