Positioning :before and :afer psudo-classes outside parent division - html

Question

I have a division that has a background image but it needs to be a varible size. I'm using three images. One of the top, one for the bottom and a repeating one for the middle.
I've only got one div to work with and given the middle background image to that and then used the before and after pesudo classes to place the other images. The image from the main division shows up behind these two since they are semi transparent. Is there a way round this in css or a better method to do it?
HHTML:
<div class="faq">
<strong>Q. Who was the greatest business man?</strong><br />
<p><strong>A. </strong>Noah. He kept his stock afloat, while the rest of the world went into liquidation.</p><br />
<strong>Q. How should my employees let off steam?</strong><br />
<p><strong>A. </strong>Take them see to see the comedian Sampson. He'll bring the house down.</p><br />
</div>
CSS - style
.faq{
background: transparent url(../images/image_middle.png) repeat-y center;
color: #ffffff;
display: block;
}
.faq:before {
background: transparent url(../images/image_top.png) no-repeat center top !important;
}
.faq:after {
background: transparent url(../images/image_bottom.png) no-repeat center bottom !important;
}
CSS - layout
.faq:before {
padding-top: 20px;
display: block;
content: "\A";
}
.faq:after {
padding-top: 14px;
display: block;
content: "\A";
}
.faq{
margin: 20px 0 5px !important;
padding: 0 20px 0 15px !important;
}

Answer 1

The best way to do this is by using multiple backgrounds - see https://developer.mozilla.org/en-US/docs/CSS/Using_CSS_multiple_backgrounds. in this way, you can specify the 3 different images and their positions as styles for the element. List the top image first.
If your browser support requirements won't work with CSS multiple backgrounds, you can get the same result by styling other elements - such as a h1 or p:last inside your div. This approach is more complicated, since you have to be very careful about the position of elements inside that div.
Note that a background or image will always show through transparent areas of an image above it. If you don't want this, you must put something opaque into that cover-up image - such as the background color that you're trying to fade to.
For more detailed help, please post a self contained example of the code you're working with.