带有单独背景幻灯片的滑块

Question

I'm trying to create an effect for a website which features a large content slider near the top of the page. Namely, I want to position a larger image behind the <div> containing the slider so that it shows outwards from the left, right and bottom, but stays behind other content. (Take a look at the slider on the frontpage of AutoDesk's website for a similar example) I'm currently using the Foundation 4 framework, and Unslider.js .

Think of this structure:

<ul class="slider-background">
    <li class="slider-bckgrnd"><img src="./bg.png"/></li>
    ...
    <li class="slider-bckgrnd"><img src="./bg.png"/></li>
<ul>

<div class="slider">
    <ul>
        <li class="slide"><img /></li>
        ...
        <li class="slide"><img /></li>
    </ul>
</div>

The biggest problem I'm having is figuring out how to get the background image to display behind everything else.

I've tried the z-index, but that doesn't work for elements further down the page. Is the solution an extra wrapper <div> around the whole thing?

EDIT: I want a separate background for each individual slide, and the slides are of varying heights. I'm handling the positioning via jQuery / javascript.

Answer 1

The solution was much easier than expected. I simply had to assign position: relative; to the .row 's from Foundation to allow them to obey z-index rules.