CSS Background Issues in Firefox

I am currently working on converting my .asp website into a .php website and at the same time I am trying to update the appearance to make it look more crisp and professional.

I have used CSS to apply several different background images all at once for different corners and sides. In IE it works perfectly, however in Firefox the left repeating side image will not work.

Here is my CSS, let me know if I need to provide a sample source code for how I actually implemented it into the HTML.

[CODE]body {background-color: #BB9900}

.bkg1 {
background: #BB9900 transparent url(files/hsp/bkgdwn.bmp) repeat-y bottom left;
}
.bkg2 {
background: transparent url(files/hsp/bkghrzntl.bmp) repeat-x top left;
}
.bkg3{
background: transparent url(files/hsp/topleft.bmp) no-repeat top left;
}
.bkg4{
background: transparent url(files/hsp/tr.bmp) no-repeat top right;
}
.bkg5{
background: transparent url(files/hsp/bl.bmp) no-repeat bottom left;
}

div.nav {
position:absolute;
left:450px;
top: 160px;
}

div.main {
position:relative;
left:150px;
top: 210px;
}[/CODE]

And here is a working version of the website.

[url]www.am-wildlife.net[/url]

Notice if you look at it in IE all background images show as I wanted.

I am very new to CSS and have probably coded it poorly, if there is a better way to do this please let me know.

Also in #CSS _↴