Question

Hi guys how can I get the red overlay to slide behind the content rather than with the content? http://jsfiddle.net/MZL5q/3/

I am trying with:

.transparent_layer{
background: url('../images/overlay_repeat.png') repeat-y 0 0;
width:810px;
margin:0 auto;
padding-top: 14px;
height:0;
z-index: -99999;
background-color:red;
}​

Answer 1

Please check out this http://jsfiddle.net/MZL5q/13/

CSS

.behind-layer {
    background: url('../images/overlay_repeat.png') repeat-y 0 0;
    width:810px;
    margin:0 auto;
    padding-top: 14px;
    height:0;
    z-index: 1;
    position:absolute;
    background-color:red;
}

.transparent_layer {
    width:810px;
    position:absolute;
    z-index:2;
}

JS

$('.behind-layer').animate({
  height: '670'
}, 5000, function() {
  // Animation complete.
  alert('completed');
});

HTML

<div class="behind-layer"></div>
<div class="transparent_layer">
<!-- THE REST OF HTML CONTENT -->