jquery - Multiple vertical background colors in CSS3 -

jquery - Multiple vertical background colors in CSS3 -

problem:

trying create solution allow me have 5 multiple background colors fill out webpage regardless of width. have managed 5 div tags wonder if it's possible using css3?

the outcome is:

i have searched stackoverflow , web without results, or bad @ searching.

you utilize linear-gradients accomplish 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 together vendor prefixes 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 back upwards can found here.

jquery html css css3 background-color