Multiple background colors on 1 div

Question

I have a div and I would like to apply 2 backgrounds to it horizontally using CSS3, but I cannot understand, and therefore I would appreciate any help!

  background: blue top no-repeat 10%; background: yellow bottom no-repeat 10%; 

I want the top half to be one color and the bottom half to a different color.

I know that this can be done quite easily with images, but I just can't figure out how to do this without using them.

Answer 1

Gradient is a fairly easy way to do this using CSS3 and just one div :

http://jsfiddle.net/thirtydot/8wH2F/

Yes, I lied. This is not very simple due to the many different versions with the version prefix that you should use:

 div { background: #000fff; /* Old browsers */ background: -moz-linear-gradient(top, #000fff 0%, #000fff 50%, #ffff00 50%, #ffff00 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000fff), color-stop(50%,#000fff), color-stop(50%,#ffff00), color-stop(100%,#ffff00)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* Opera11.10+ */ background: -ms-linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* IE10+ */ background: linear-gradient(top, #000fff 0%,#000fff 50%,#ffff00 50%,#ffff00 100%); /* W3C */ } 

I created CSS here and removed the filter property, as this will result in the actual gradient in IE6-9.

Answer 2

Another way to achieve this, in addition to gradients, is to use a pseudo-element:

http://jsfiddle.net/kizu/S3LXB/

Add position: relative and some positive z-index to the element and negative z-index to the pseudo-element, and it will be placed on top of the background of the element, but below the contents of the element. And then you can specify how you want.

This method is not as flexible as the one that has gradients, but! You can certainly use gradients for the pseudo-element and thus achieve even greater effect.