CODEWITHSUNDEEP
htmlcssbackgroundbackground-imagenavigationbar
user3016643
user3016643

Reputation: 11

HTML Coding: Fix to Background Image Interfering with Navigation Bar

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>

Upvotes: 0

Views: 2915

Answers (3)

rmunshi
rmunshi

Reputation: 26

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>

Upvotes: 1

Igl3
Igl3

Reputation: 5108

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">

Upvotes: 0

Baschi
Baschi

Reputation: 1128

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.

Upvotes: 1

Related Questions