HTML Coding: Fix to Background Image Interfering with Navigation Bar

StackOverflow https://stackoverflow.com/questions/20116111

Question

I'm currently coding a basic website to have more experience in coding websites, but I've come across a problem: Background images and the Navigation Bar. The problem is, every time I include my background image in the HTML code, it interferes with my Navigation Bar, either completely removing it or moving it to the bottom of the page (I would like for it to be on the top). I'm honestly not sure how to fix it. I've included the HTML and CSS codes, but I did not include the background code. Here's the background HTML code I currently have. Thank You.

<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
<img src='Unknown.png' style='width:100%;height:100%'/>

Here's the actual

HTML + CSS

<html>
<div id="menu">
<ul>
<li><a href="index.html">HOME</a></li>
<ul><li><a href="aboutus".html">ABOUT US</a></li>
<li><a href="siteupdates.html">SITE UPDATES</a></li>
<li><a href="contactus.html">CONTACT US</a></li>
</ul>
</div>
<html>
<head>
<style type="text/css"> 
#menu {
    width: autopx;
    height: autopx;
    font-size: 16px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: center;
    text-shadow: 3px 2px 3px #333333;
    background-color: #8AD9FF;
        border-radius: 8px;
}
#menu ul {
    height: auto;
    padding: 8px 0px;
    margin: 0px;
    display: inline;
}
#menu li { 
display: inline; 
padding: 20px; 
}
#menu a {
    text-decoration: none;
    color: #00F;
    padding: 8px 8px 8px 8px;
}
#menu a:hover {
    color: #F90;
    background-color: #FFF;
}
</style> 
</head>
<body>
</body> 
</html>
Was it helpful?

Solution

The problem is in the position:absolute in the style of your div. If you remove that, your image will not hamper the navigation bar. The correct code for this page would be-

<html>
<head>
<style type="text/css"> 
#menu {
    width: auto;
    height: auto;
    font-size: 16px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: center;
    text-shadow: 3px 2px 3px #333333;
    background-color: #8AD9FF;
    border-radius: 8px;
}
#menu ul {
    height: auto;
    padding: 8px 0px;
    margin: 0px;
    display: inline;
}
#menu li { 
display: inline; 
padding: 20px; 
}
#menu a {
    text-decoration: none;
    color: #00F;
    padding: 8px 8px 8px 8px;
}
#menu a:hover {
    color: #F90;
    background-color: #FFF;
}
</style> 
</head>
<body>
<div id="menu">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="aboutus.html">ABOUT US</a></li>
<li><a href="siteupdates.html">SITE UPDATES</a></li>
<li><a href="contactus.html">CONTACT US</a></li>
</ul>
</div>
<div style="z-index:0;left:0;top:0;width:100%;height:100%">
<img src="Unknown.png" style='width:100%;height:100%'/>
</div>

</body> 
</html>

OTHER TIPS

There are some problems with your code. First of all the normal structure of an HTML document is:

<html>
    <head>
      <!-- META TAGS, IMPORTS, TITLE -->
    </head>
    <body>
      <!-- CONTENT -->
    </body>
</html>

This means you are only enabled to place the navigation div with id menu in the body part. Now to give your body a background image do not use a seperate img element. Just add the image as CSS background attribute to the body. You can find an introduction here.

Add the body tag to your html to format it properly like this:

<html>
    <head>
      //Title metatags etc here
    </head>
    <body>
      //Your pages content
    </body>
</html>

and then set your bachground either via css in body:

body {
background-image: url(relativepath to your image here);
}

or Inline like this:

<body background-image="relative path here">
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top