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

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

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/