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.

Tacheometer

colorzilla.com/gradient-editor – Otiose

see this #6457906 – Ardene

Definitely use a gradient. – Waterworks

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.

Pipeline

Good one , yours is much better than mine.Voted! – Crystallography

Seems to work well without html, body { height: 100%; } too. Fiddle – Waterworks

@Waterworks Yea, you're right, it will work in most circumstances, but look at what happens when you add margin: 0 to the body element. (example). Adding html, body { height: 100%; } will cover most use cases, see – Pipeline

Answer 2

Look at this i made a trick for this .http://jsfiddle.net/753gugpt/

I used linear-gradient CSS3 property like this:

#container {
  width: 100%;
  /*or 900px for example */
  overflow-x: hidden;
}
#exampleB {
  width: 32700px;
  height: 285px;
  background-color: #a8e9ff;
  filter: progid: DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#a8e9ff, endColorstr=#052afc);
  background-image: -moz-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%);
  background-image: linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%);
  background-image: -webkit-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%);
  background-image: -o-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%);
  background-image: -ms-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%);
  background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%, #a8e9ff), color-stop(0%, #052afc), color-stop(12%, #485e69), color-stop(1%, #ff8d00));
}

<div id="container">
  <div id="exampleB"></div>
</div>

Maybe this will work for you :)

Crystallography

As i said @Josh Crozier 's solution is much better than it was mine. But it still works in one way! :) Thanks! – Crystallography