z-index not working for image behind wordpress menu

A

admin

Administrator
Staff member
I am trying to put an image behind my header and menu. I set all of the layers above the background image div including all of the menu elements to
Code: 
position:relative;z-index:10;
and the div with the background image to
Code: 
position:relative;z-index:0;

you can see my code here: <a href="http://wheresuccessblooms.com/wordpress/" rel="nofollow">http://wheresuccessblooms.com/wordpress/</a>

I know it has something to do with the menu because when I delete the call to the menu the background image goes to where it should. Not sure what else I need to set the position and z-index to? PULLING MY HAIR OUT. lol Please help.

HTML:

Code: 
&lt;div class="menu-main-menu-container"&gt;
  &lt;ul id="menu-main-menu" class="menu"&gt;
    &lt;li id="menu-item-16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-16"&gt;
      &lt;a href="http://wheresuccessblooms.com/wordpress/contact-us/"&gt;HOME&lt;/a&gt;
    &lt;/li&gt;
    &lt;li id="menu-item-17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-17"&gt;
        &lt;a href="http://wheresuccessblooms.com/wordpress/contact-us/"&gt;ABOUT&lt;/a&gt;
    &lt;/li&gt;
    &lt;li id="menu-item-15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15"&gt;
        &lt;a href="http://wheresuccessblooms.com/wordpress/contact-us/"&gt;Contact Us&lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

                        &lt;div id="top_slider"&gt;
                            &lt;div id="slider"&gt;
                                &lt;div id="slider_wrap"&gt;

                                &lt;/div&gt;
                            &lt;/div&gt;  
                        &lt;/div&gt;

CSS: JUST THE MENU AND SLIDER CSS

Code: 
nav{position:relative;z-index:5;}
div.menu-main-menu-container{position:relative;z-index:5;}
ul#menu-main-menu{position:relative;z-index:5;}
li.menu-item{position:relative;z-index:5;}
#page_nav {width:100%; height:53px;background-color:#f27479;position:relative;z-index:10;}
#page_nav ul { float: left; display: block;position:relative;z-index:5;}
#page_nav ul li { float: left; list-style-type: none; margin-top:20px;border-right:1px solid #ca6064;position:relative;z-index:5;}
#page_nav ul li a { color: #fff; text-decoration: none; font-size: 14px; text-transform: uppercase; font-weight: 700; text-shadow: 0px 1px 0px rgba(0,0,0,.5); padding-left: 20px;position:relative;z-index:5; }
#page_nav ul li a:hover { color: #a2a2a2; position:relative;z-index:5;}
#page_nav ul li.current a, 
#page_nav ul li.current a:hover { color: #ba4040; position:relative;z-index:5;}

#top_slider{overflow:hidden;position:relative;z-index:0;left:0px;height:963px;top:-250px; margin:0px auto;
background:url('http://wheresuccessblooms.com/wordpress/wp-content/themes/WhereSuccessBlooms/images/slide_1.jpg') no-repeat top center;}
 
You must log in or register to reply here.