I'm trying to do this really simple fade using TweenMax for this div I have. Here's the css for the div

.aboutBg { 
    background:url(../images/pattern.jpg);
    top:0;
    right:0;
    left:0;
    bottom:0,
    position:fixed;
    border:10px solid red;
    z-index:10;
}

TweenMax.to('.aboutPage', 0.5, {autoAlpha:1});

What's happening is the border would fade in nicely but the patterned bg is not, it just pops up at the end of the tween. If I remove the z-index everything works, but I have to have set the z-index so it's on top of my other content. Also I'm not tweening the z-index, it's set before the tween, so I'm not sure why it's not fading correctly. Anyone has any idea? Thanks.