Layering/Stacking DIVs? Help!

Hello,

I am trying to accomplish the following…

My website has a striped background (fixed; not scrolling) and the sheet lies on top of it. I have a separate image, a gray bar and white frame, that I want to use as a FIXED (not-scrolling) header so that when you scroll, the sheet goes BEHIND the header…

I created a DIV called “banner” that I put into my header.php and it is showing exactly like I want it to… except that when you scroll, the sheet goes IN FRONT of the header… can anyone help me figure out how to get the sheet to go behind? I gave the “banner” div I high z-index value… but apparently that didn’t work?

“banner” div that I created:

.banner
{
  z-index: 9000;
  height: 274px;
  top: 0px;
  background-image: url('images/jkl_bkgdbar.png');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: top center;
}

the relevant text in my header.php:

<div id="art-main">
<div class="banner"></div>
<div class="art-sheet">
    <div class="art-sheet-tl"></div>
    <div class="art-sheet-tr"></div>
    <div class="art-sheet-bl"></div>
    <div class="art-sheet-br"></div>
    <div class="art-sheet-tc"></div>
    <div class="art-sheet-bc"></div>
    <div class="art-sheet-cl"></div>
    <div class="art-sheet-cr"></div>
    <div class="art-sheet-cc"></div>
    <div class="art-sheet-fgb"></div>
    <div class="art-sheet-body">
<div class="art-nav">
	<div class="l"></div>
	<div class="r"></div>
	<div class="art-nav-center">
	<ul class="art-menu">
		<?php art_menu_items(); ?>
	</ul>
	</div>
</div>

I appreciate any and all help! I need to get this website finished up ASAP!