Multiple Backgrounds assigned to a DIV

Is there a way to assign multiple backgrounds to a single element DIV.

The idea being to have rounded corners on the top and bottom of a div with a straight background image in the middle.

Two images --

cbmain.png has the corners and cbmains.png is a straight image. They are both transparent and I hope there is a way of managing this in CSS.

Something like ::

background-top:url(example.com/images/cbmain.png) 960px 10px;
background:url(example.com/images/cbmains.png) 960px;
background-bottom:url(example.com/images/cbmain.开发者_运维百科png) 960px 10px;

With CSS3 you can do something like:

background-image: url(example.com/images/cbmain.png), url(example.com/images/cbmains.png);
background-position: 960px 10px, 960px;

This will work in Firefox 3.6+, Chrome, Safari, IE9. For earlier releases of IE, you can use CSS3 Pie.

Unfortunately multiple-background is a CSS3 thing. I already tested and worked with it on IE9, Firefox, Chrome, Opera, Safari. Your code with the CSS3 syntax would be something like:

background-image: url(example.com/images/cbmain.png), url(example.com/images/cbmain.png), url(example.com/images/cbmains.png);
background-position: 960px top, 960px bottom, 960px top;
background-repeat: no-repeat, no-repeat, repeat-x;

Also I suggest you a graceful degradation using Modernizr for those old IE:

.no-multiplebgs #element { background: url(example.com/images/cbmains.png) 960px; }

Another approach (that I don't like) is using any polyfill to force IE6, IE7 and IE8 to work as IE9. Wich can cause problems, memory leaks, etc, etc, etc.

Yes but only with CSS3 support. Otherwise, you have to cheat with DIVs within DIVs in your markup, and assign a different background to each.