Multiple background colors for div

Question

I have a div

 <div class="test"> Some text </div> 

I would like to have a different background color for the same percent div (horizontal coloring)

 ----------------------------- | 20% | 30% | 50% | | Red | Yellow | Green | ----------------------------- 

Is this possible with CSS?

Answer 1

You can use CSS3 Gradients ^[1] to achieve this effect.

 div { background: linear-gradient(to right, #ff3236 0%,#ff3033 32%,#3e30ff 32%,#3e30ff 63%,#33ff30 63%,#33ff30 100%); height: 400px; } 

Demo

You can create such gradients over here.

---

You can also use px as a unit along with % if you are looking for a static gradient width

Demo ^{(add browser-prefixes if you are looking for a cross-browser solution, I haven’t added all the rules to this demo)}

Demo 2 (Vertical split, just change to right to to bottom )

^{1. More on CSS3 Gradients 2. Browser Support}

Answer 2

You can achieve this using a gradient:

Or Google, and create your own. Or use the generator as follows:

http://www.colorzilla.com/gradient-editor/

which gives you the following css code:

 background: #ff3019; /* Old browsers */ background: -moz-linear-gradient(left, #ff3019 0%, #d40000 20%, #f2f600 20%, #f2f600 50%, #1e7a00 50%, #1e7a00 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff3019), color-stop(20%,#d40000), color-stop(20%,#f2f600), color-stop(50%,#f2f600), color-stop(50%,#1e7a00), color-stop(100%,#1e7a00)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(left, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(left, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(left, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* IE10+ */ background: linear-gradient(to right, #ff3019 0%,#d40000 20%,#f2f600 20%,#f2f600 50%,#1e7a00 50%,#1e7a00 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#1e7a00',GradientType=1 ); /* IE6-9 */ 

Answer 3

You can create three child parents inside the parent. Position them completely, make the parent transparent, then give the three divs z-index 0 so that they sit under the text, not on top.

Answer 4

This progressive enhancement method works for all browsers that support CSS 2.1 pseudo-elements and their positioning. CSS3 support not required

 #div{ position:relative; z-index:1; min-width:200px; min-height:200px; padding:120px 200px 50px; background:#d3ff99 url(vines-back.png) -10% 0 repeat-x; } #div:before, #div:after { position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0; padding-top:100px; } 

Demo