How to split the background-color in 4

Question

I have this div:

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

That represents the body of a page. And I want to make it's background in 4 colors. I know how to make it in 2:

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

I want to have something like this:

PS : if you like the colors:

orange: #F26522;
green:  #BBC274;

Can somebody help? Thank you!

Answer 1

With CSS3, you can apply 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>