Multiple vertical background colors in CSS3

Question

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:

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

Answer 1

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.