Multiple vertical background colors in CSS3

Problem:

Trying to create a solution that would allow me to have five multiple background colors that fill out a webpage regardless of width. I have managed to do this with 5 div tags but I wonder if it’s possible to do this completely using CSS3?

The outcome I would like is:

enter image description here

I have searched Stackoverflow and the web without any results, or I am simply very bad at searching.


solution

You could use linear-gradients to achieve this.

Example Here

html, body {
  height: 100%;
}
body {
background-image: linear-gradient(90deg,
  #F6D6A8 20%,
  #F5BA55 20%, #F5BA55 40%,
  #F09741 40%, #F09741 60%,
  #327AB2 60%, #327AB2 80%,
  #3A94F6 80%);
}

Just add vendor prefixes for additional browser support

body {
  background: -moz-linear-gradient(90deg, #F6D6A8 20%, #F5BA55 20%, #F5BA55 40%, #F09741 40%, #F09741 60%, #327AB2 60%, #327AB2 80%, #3A94F6 80%);
  background: -webkit-linear-gradient(90deg, #F6D6A8 20%, #F5BA55 20%, #F5BA55 40%, #F09741 40%, #F09741 60%, #327AB2 60%, #327AB2 80%, #3A94F6 80%);
  background: linear-gradient(90deg, #F6D6A8 20%, #F5BA55 20%, #F5BA55 40%, #F09741 40%, #F09741 60%, #327AB2 60%, #327AB2 80%, #3A94F6 80%);
}

Browser support can be found here.