Create a div with bottom half one color and top half another color

Question

I have a which I am going to make into a button. The top half should be #ffd41a and the bottom half should be #fac915. Here is a link to the button at present. http://jsfiddle.net/WnwNW/

The problem that I'm facing is how should I deal with two background colors. Is there a way to do what I'm trying to do without the need for addition divs or spans? Can I have two background attributes within the same CSS class?

Answer 1

CSS3 provides a way to do this

background-image: linear-gradient(to bottom, #FFD51A 50%, #FAC815 50%);
background-image: -o-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -moz-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -webkit-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);
background-image: -ms-linear-gradient(bottom, #FFD51A 50%, #FAC815 50%);

http://jsfiddle.net/WnwNW/1/

Answer 2

Yes and no. You can use two background attributes. However, this is only supported in CSS3. That means that two background images will break in older browsers. That being said, you can do something like this.

background-image: url(color1.png), url(color2.png);
background-position: bottom, top;
background-repeat: no-repeat;

I'm not sure if you can specify multiple background "colors."