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.