css - DIV order and Z-Index -

I found the right way to show my background image the way I want for my photography website. (Through the search of Stackworflow posts)

What I did in my code before and it got me with some minor edits However, now the menu or anything does not work properly.

Ex can not be clicked on the link at the top of my page

I think the background is covering the entire page and that is why I have 'background' 'Tried to remove the DIV and all this worked again, but the image of the background is no longer the situation and the way I want it too.

I think it is related to the Z index, can anyone help me fix this? And tell me why this is happening, so I can not move further into the code.

Here JSFold (easy to view / edit)

  body, html {font Origin: 11px; Font-family: Verdana, Helvetica, Ariel, sans-serif; Margin: 0 px; Padding: 0px;} #background {position: absolute; Top: 0 pixels; Left: 0 pixels; Hidden flurry; Width: 100%; Height: 100%; font-weight: bold; Font-size: 30px;} .cover {status: absolute; Width: 100%; Top: 0 pixels; Z-index: -1;} # container {display: block; Clean both; Text align: center; Padding-top: 40px; }. Thumb {text-align: left; Display: inline-block; Margins: 5px; Padding: 10px; Background color: RGBA (102102102,0,5);} #Menu {top: 0; Left: 0; Margin: 0; Padding: 0;} # menu ul {list-style-type: none; Left: 0; Correct: 0; Status: Completed; Display area; Height: 33px; Margin: 0; Padding: 0; Top: 0; Left: 0;} # menu lee {display: block; Swim left; Margin: 0; Padding: 0;} # menu taken {float: left; Color: # A79787; Text-decoration: none; Height: 24px; Padding: 9px 15px 0; Font-weight: normal;} #Menu Li A: Hover {Color: #FFF; Background color: RGBA (102102,102,0.5); Text-decoration: None;} Toggle {Float: Right; Color: # A79787; Text-decoration: none; Height: 24px; Padding: 9px 15px 0; Font-weight: normal;} # toggle a: hover {color: #fff; Background color: RGBA (102102,102,0.5); Text-decoration: none;} & lt; Body & gt; & Lt; Div id = 'background' & gt; & Lt; Img src = 'http: //i.imgur.com/9dOAPlS.jpg' square = 'cover' / & gt; & Lt; / Div & gt; & Lt; Div id = 'navigation' & gt; & Lt; Div & gt; & Lt; Ul id = 'menu' & gt; & Lt; Li & gt; & Lt; A href = '#' & gt; Home & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = '#' & gt; Album & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = '#' & gt; Contact & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt; & Lt; Div id = 'toggle' & gt; & Lt; A href = '#' & gt; Hide all & lt; / A & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = 'container' & gt; & Lt; / Div & gt; & Lt; / Body & gt; Modify the following styles (I  z-index  to  .cover  to  #background ):  
  #background {position: absolute; Top: 0 pixels; Left: 0 pixels; Hidden flurry; Width: 100%; Height: 100%; font-weight: bold; Font-size: 30px; Z-index: -1;} .cover {position: absolute; Width: 100%; Top: 0 pixels;}   
 When a  full  ly is located, it sits on other elements. So in your case, you tried putting offset the  z-index  on  .cover . This will not work because  .cover  is a child of  #background , and hence it is related to  z-index   #background  (which already sits above everything).