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

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?

htmlcss


Solution 1:[1]

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."

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 afkbowflexin

Related Questions