Slider with pattern overlay issue

Question

I'm trying to create a slider that fades through images and text. This is simple enough using Flexslider for example, but how do I make it so that the slider has a pattern overlay that is above the image, but underneath the text?

<div class="flexslider">
    <div id="pattern"></div>
    <ul class="slides">
        <li>
            <div class="slider_text"><span>Some Text<br/>Over the Image</span></div>
            <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" />
        </li>
        <li>
            <div class="slider_text"><span>Some Text<br/>Over the Image</span></div>
            <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" />
        </li>
    </ul>    
</div>

FIDDLE

In the fiddle I have added the pattern, but it covers the text too ... Is there anyway to do this? I don't really want to have to put the pattern inside every <li> either, but so far that's the only solution I can think of.

Thanks!

Answer 1

So we move the pattern into the ul and set the text's z-index higher.

DEMO HERE

The code I added to clearly show whats going on.

CSS:

.slider_text {
    z-index: 999;
}

So we move the #pattern inside the ul.

HTML:

<ul class="slides">
    <div id="pattern"></div>