Using :before and :after pseudo-classes

[KeredDrahcir]

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?

[Rabbit]

It would help to see the code.

[KeredDrahcir]

The code won't help much but here it is.

<div class="faq">
  <strong>Q.&nbsp;Who was the greatest business man?</strong><br />
  <p><strong>A.&nbsp;</strong>Noah. He kept his stock afloat, while the rest of the world went into liquidation.</p><br />
  <strong>Q.&nbsp;How should my employees let off steam?</strong><br />
  <p><strong>A.&nbsp;</strong>Take them see to see the comedian Sampson. He'll bring the house down.</p><br />
</div>
 

.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;
}

.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;
}

[Rabbit]

The code always helps. It sounds like you don't want to see the div's background over the before and after images. So why did you make it transparent?

[KeredDrahcir]

It's becuase I need to see the page background behind the divs.

[Rabbit]

That's exactly why you shouldn't make it transparent. Am I misunderstanding what you want?

I also noticed that you didn't specify the content property to specify what content to insert. That's a required property.

[KeredDrahcir]

What I need is to have a box that's made up of three sections. The top, middle and bottom. Since there box is going to be differnet height at different times I'm doing in three parts instead of one so I can make the middle scroll vertically to take up the required space.
The page has a background image which need to be seen behind the box and so the boxes are semi transparent.

I'm sorry I should have included a bit more of the code. I did include the content property. To allow me to change colour themes quickly I keep colours and backgrounds seperate from layout. I'll edit the previous post to include the code from the other sheet.

[Rabbit]

Can you post a screenshot? I'm having difficulty understanding what the issue is.

[KeredDrahcir]

I've taken a different approach. It's worked for me. It doesn't solve the problem I posted though but it's a work round.

I took out the pseudo classes and gave the strong a tallish top image for the background and did a tallish bottom image in the p. They shouldn't ever be too high so they now work as separate elements.

I have encounted another similar problem but I'm still trying to fix that myself.