I just found the perfect way to show my background image for my photography website the way I want to. (through searching stackoverflow posts)I took out what I had before in my code and replaced it with what I found with some minor edits. However, now neither the menu or anything else functions properly.Ex. The links at the top of my page cant be clicked. I think the background is covering the whole page and thats why. I tried removing the 'background' DIV from my code and it all worked again, but the background image is no longer position and used the way I want it too.I think it's Z-Index related. Can someone help me fix this? and tell me why it is happening so I can avoid doing further in the code.Here is the JsFiddle (for easy view/edit)http://jsfiddle.net/3kke4/\[code\]body, html{ font-size:11px; font-family:Verdana,Helvetica,Arial,sans-serif; margin : 0px; padding : 0px;}#background{ position : absolute; top : 0px; left : 0px; overflow : hidden; width : 100%; height : 100%; font-weight : bold; font-size : 30px;}.cover{ position : absolute; width : 100%; top : 0px; z-index : -1;} #container{ display:block; clear:both; text-align: center; padding-top:40px;}.thumb{ text-align:left; display:inline-block; margin:5px; padding:10px; background-color:rgba(102,102,102,0.5);}#menu{ top:0; left:0; margin:0; padding:0;}#menu ul{ list-style-type:none; left:0; right:0; position:absolute; display:block; height:33px; margin:0; padding:0; top:0; left:0;}#menu li{ display:block; float:left; margin:0; padding:0;}#menu li a{ 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(102,102,102,0.5); text-decoration:none;}#toggle a{ float:right; color:#A79787; text-decoration:none; height:24px; padding:9px 15px 0; font-weight:normal;}#toggle a:hover{ color:#fff; background-color:rgba(102,102,102,0.5); text-decoration:none;}<body><div id='background'> <img src='http://i.imgur.com/9dOAPlS.jpg' class='cover'/></div><div id='navigation'> <div> <ul id='menu'> <li><a href='http://stackoverflow.com/questions/15650277/#'>Home</a></li> <li><a href='http://stackoverflow.com/questions/15650277/#'>Albums</a></li> <li><a href='http://stackoverflow.com/questions/15650277/#'>Contact</a></li> </ul> </div> <div id='toggle'> <a href='http://stackoverflow.com/questions/15650277/#'>Hide All</a> </div> </div><div id='container'></div></body>\[/code\]
DIV order and Z-Index
- Thread starter FailaDile
- Start date