CSS Attaching an image to the wrapper element using :after

[tommybfisher]

I have a semi transparent wrapper element made from a 1px squared translucent png file. I have another png file which is an opaque motif that I want to 'fix' to the top of the semi transparent wrapper.

 

Using the :after pseudo-element, I have tried placing the motif as a background image. This method doesn't show the image at all. Displaying the image using 'content' shows the motif, but I can't get the content from the child containers to float over it, it simply sits at the bottom.

 

Is it possible to use the pseudo-element of :after (or :before) to achieve what I am after? I could of course combine the png background and motif into one image, but then I lose the flexibility of the semi-transparent background growing with the pages contents.

 

My current css for the wrapper is:

#wrapper {
position: relative;
width: 1000px;
min-height: 100%;
background-image: url(../images/40p.png);
background-repeat: repeat;
margin: 10px auto;
padding: 10px;
overflow: hidden;
text-align: center;
}

#wrapper:before {
content: url(../images/flourish.png);
float: right;
}

[tommybfisher]

Solved it. Just had to add absolute positioning on the pseudo-element.