Structure of CSS background images

I'm posting this in a few CSS / HTML forums.

I think this is a knucklehead basic CSS question, but I can't seem to wrap my head around it. I'm not experienced with background-image attributes, and I thought I was setting out to do something simple but it has loused me all up.

Here's an image

with two parts - the 'swan box' on the left and the 'graphic' on the right. It is used inside a collapsible panel, with text overlaid on both halves, as here:

I'm trying to separate out the two parts of the image, and build a box using CSS in this model:

and am getting this result instead:

My goals in trying to separate it are two fold. For one, the 'swan box' is the same in every graphic, so I'm trying to save a bit of bandwidth; mostly, though, I generate the Spry code in FileMaker, and would like to automate the image placements (by having FileMaker script a call for styles that themselves call for background images, rather than insert the images manually, one at a time, while I create the CollapsiblePanels in Dreamweaver).

Any help is appreciated.