CSS3 multiple bg images, fix for internet explorer?

Howdy.

Here is the site:

https://www.coveringtherind.com

On my secondary sidebar–the dark leather behind the blogroll– I have a background image that repeats the length of the element. However, I also have a small sliver image positioned at the top of the element to make it look like the leather is torn at the top. I’ve done this using the CSS3 property of multiple background images:

background: url(https://www.coveringtherind.com/images/sidebartop.jpg) top right no-repeat,
       url(https://www.coveringtherind.com/images/sidebar2.jpg) top left repeat-y;

However, Internet Explorer doesn’t support this feature, and I’m sure there are other browsers that don’t either. What happens when the code isn’t supported is that neither of the images show up at all, making the white text unreadable. Is there any way I can place a fix in the code to disable one of the background images if the browser doesn’t support this CSS feature? Or is there a better way of adding this small image element in between the main sidebar and secondary sidebar? I could do this by creating a new div and positioning it in between the element in HTML but I am totally clueless with PHP. I am using the Thematic framework and the Early Morning theme as a foundation, if that helps.

Much appreciated.

Heather