CSS Help – Transparent PNGs and DIVs not playing nicely

Here is the WordPress driven site I’m working on for my sister’s theatre group at her school:

https://www.saginawtheatre.com/

(Note – I still have some graphic and typeface stuff to work on)

Down at the bottom, the flourishy things are supposed to extend down past the line like they do on the sides, but when I increase the #footer height, since the footer background image has transparent edges, the background image of the main content DIV continues to the bottom of the footer and looks bad. I have it set so it cuts off right at the line, but this is just temporary and looks better than the alternative. Is there a way to stop the content DIV from continuing behind the footer?

Here are some stylesheet excerpts:

/* Content */

#xbg1
{
position: absolute;
z-index: 1;
background: transparent url(‘images/a2.png’) no-repeat top left;
width: 778px;
height: 98px
}

#content
{
background: transparent url(‘images/a3.png’) repeat-y top left;
}

#content p
{
margin-bottom: 1em;
line-height: 1.6em;
}

#content h2, h3, h4, h5, h6
{
position: relative;
color: #3F2109;
margin-bottom: 1em;
padding-bottom: 0.2em;
border-bottom: solid 1px #DFBF99;
}

#content h2
{
font-size: 1.5em;
}

#content h3
{
font-size: 1.3em;
}

#content ul, #content ol
{
margin-bottom: 2em;
padding-left: 1em;
}

#content blockquote
{
margin-bottom: 2em;
}

#content blockquote p
{
border-left: solid 8px #667700;
padding-left: 1em;
margin-bottom: 0em;
}

#content .post, #content form
{
margin-bottom:3em;
}
#content .post h2 a
{
color:#3F2109;
}
#content .post-content a
{
border-bottom:1px dashed;
}
#content .post-content a:hover
{
text-decoration:none;
border-bottom:1px solid;
}
#content .post-footer
{
padding-bottom: 0.2em;
border-bottom: solid 1px #DFBF99;
font-size:0.9em;
}
/* Primary Content */

#primaryContentContainer
{
position: relative;
z-index: 2;
float: right;
margin-left: -18em;
width: 100%;
}

#primaryContent
{
margin: 2em 3.0em 0em 19em;
padding: 0em 0em 0em 1.5em;
border-left: solid 1px #DFBF99;
}

————

/* Footer */

#footer
{
width: 778px;
height: 174px;
padding-top: 0px;
background: transparent url(‘images/a4.png’) no-repeat top left;
text-align: center
}

———–

I thought it may have something to do with the z-index but I played with that and it didn’t seem to do anything.