Content within footer background image

I hope this problem is nontrivial only for me:

I created an image to illustrate the challenge:
Every of my posts consist of header, the content and a footer. (Fig. 1)
The header has 1 transparent background,
the contents background is a transparent image that gets multiplied (repeat-y)
and the footer has like the header only 1 transparent image.

I want the contents text to overlap into the footer, without the contents background overlapping into the footers background. (Fig. 2)

Just changing the contents margin to a negative value lets the background images overlap (Fig. 3)

A theoretical solution would be to divide the footers background image in two parts. The lower part stays in the footer and the upper part moves into the contents background. So the contents background would consist of two pictures, the original background image which gets repeated over and over as the entry grows and the upper part of the footer. But it would be vital that at the end of the content the upper part of the footer is shown complete. Is this possible with CSS?

The style.css is a mod of the arjuna-x theme, but here are the relevant parts anyway:

.postContent {
	color:#555;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	line-height:20px;
	margin: 0 0 0px 0px;   /* ========== rahmen oben/unten links/rechts(2te ohne funktion ========== */
	overflow:hidden;
	padding-top:0px;

}
.postContent p {
	margin:0 0 15px;
}
.postContent table {
	border-collapse:collapse;
	margin:5px 0 10px;
}
.postContent th,
.postContent td {
	border:1px solid #aaa;
	padding:3px 10px;
	text-align:left;
	vertical-align:top;

}
.postContent {
	background:url(./images/glasmiddle.png) repeat-y  0 0;
	padding-left:85px; /*abstand text glasrand links*/
	margin-right:10px;
	/*padding-bottom:100px*/
}
.postContent em {
	font-style:italic;
}
.postContent strong {
	font-weight:bold;
}
.postContent ul,
.postContent ol {
	margin-bottom:15px;
}
.postContent ul ul,
.postContent ol ol {
	margin-bottom:0;
}
.postContent ul li {
	list-style:disc;
	margin-left:25px;
}
.postContent ul ul li {
	list-style:circle;
}
.postContent ul ul ul li {
	list-style:square;
}
.postContent ul ul ul ul li {
	list-style:disc;
}
.postContent ol li {
	list-style:decimal;
	margin-left:25px;
}
.postContent ol ol li {
	list-style:lower-alpha;
}
.postContent ol ol ol li {
	list-style:lower-roman;
}
.postContent ol ol ol ol li {
	list-style:decimal;
}
.postContent h1 {
	font-size:16px;
	font-weight:bold;
	margin-bottom:10px;
}
.postContent h2 {
	font-size:15px;
	font-weight:bold;
	margin-bottom:10px;
}
.postContent h3 {
	font-size:14px;
	font-weight:bold;
	margin-bottom:10px;
}
.postContent h4 {
	font-size:13px;
	font-weight:bold;
	margin-bottom:10px;
}

.postFooter {
	background:url(./images/glasbottom.png) no-repeat 0 0;
	margin:0 0px 20px 0;
	padding-left:40px;
	position:relative;
	min-height:597px;
}
.postFooter .r {
	height:33px;
	/*background:url(./images/postFooter.png) no-repeat 100% 0;*/
	width:40px;
	position:absolute;
	right:-40px;
	top:0;
}
.postFooter .left {
	margin-left:20px;
	margin-right:130px;
	overflow:hidden;
	padding-top:5px;

}
.postCategories {
	background:url(./images/icons.png) no-repeat 0px -99px;
	padding-left:25px;
	font-size:11px;
	margin-right:20px;
	float:left;
	/*position:relative;
	top:0px;*/  /*zum verschieben hinzugefügt*/
}
.postTags {
	background:url(./images/icons.png) no-repeat 0px -150px;
	padding-left:25px;
	font-size:11px;
	float:left;
}
.postTags i {
	color:#777;
}

.postEdit,
a.postEdit:hover {
	position:absolute;
	top:3px;
	right:-20px;
	height:18px;
	background:url(./images/icons.png) no-repeat 0 -340px;
	color:#5c7a99;
	text-decoration:none;
}
a.postEdit:hover {
	text-decoration:none;
}
.postEdit span {
	display:block;
	height:18px;
	margin-left:21px;
	background:url(./images/icons.png) no-repeat 100% -60px;
	line-height:18px;
	font-size:11px;
	padding:0 15px 0 8px;
}
.postEdit:hover span {
	background-position:100% -80px;
}

.postReadMore,
a.postReadMore:hover {
	position:absolute;
	top:3px;
	right:95px;
	height:18px;
	background:url(./images/icons.png) no-repeat 0 -220px;
	color:#5c7a99;
	text-decoration:none;
}
a.postReadMore:hover {
	text-decoration:none;
}
.postReadMore span {
	display:block;
	height:18px;
	margin-left:21px;
	background:url(./images/icons.png) no-repeat 100% -60px;
	line-height:18px;
	font-size:11px;
	padding:0 15px 0 8px;
}
.postReadMore:hover span {
	background-position:100% -80px;
}

Thanks for your help,
Regards, Martin