Background image appearing underneath a CSS float

Background image appearing underneath a CSS float

I'm having difficulty figuring out how to get my navigation bar to appear
the way I want.
I have two fixed-width images that I want to float on either end of the
nav-bar (shown in orange). Then I have a fixed-width image that I want to
float in the middle of the nav-bar (shown in green).
Lastly, I have a background-image that I want to fill the gaps (shown in
blue) with.

As all the images have transparency in them, I can't simply have the
filler image apply to the entire nav-bar, as I presently do:
<div style="margin: 0 auto 0 auto;width:900px;
text-align:center;background-image:url(filler.png);">
<div style="float:left;">left-image</div>
<div style="float:right;">right-image</div>
<div>center-stuff</div>
</div>
Is there a way I can have a background-image apply to just those blue zones?