Question

I’ve been trying to get an image to work with a navigation menu I’m working on. However, it seems no matter what I try, it doesn’t display.

I’ve tried adding variations of…

display:block;
background-position:top left;
clear:both;
list-style-image:url 

…from various google searches. I’m fairly new to HTML/CSS so I would appreciate any help or advice I can get. For reference, here is some HTML/CSS I’m working with.

HTML

<div id="wrapper">
<div id="navigation">
<ul class="menu">
<li><a href="#">Forum</a></li>
<li><a href="#">Bookmarks</a></li>
<li><a href="#">Top 100</a></li>
<li><a href="#">Browse</a></li>
<li><a href="/">Home</a></li>
</ul>
</div>

CSS

#navigation .menu {
background-image:url ('images/gradient_nav.png');
border-top-style:solid;
border-top-color:#DDD;
border-bottom:2px solid #ddd;
border-top-width:2px;
height:50px;
margin-top:-5px;
clear:both;
}

im using xampp to work on my local machine, my folder structure is:

htdocs\index.php
htdocs\css\style.css
htdocs\images\

Thanks in advance!

Answer 1

the url hast to be realative to the css file, not to the file where the css is included. you haven’t given information about your folder-structure, but maybe it’s like this:

index.html
images/gradient_nav.png
css/stylesheet.css

it so, the url hast to be ../images/gradient_nav.png – resulting in this:

#navigation .menu {
  background-image:url ('../images/gradient_nav.png');
  border-top-style:solid;
  border-top-color:#DDD;
  border-bottom:2px solid #ddd;
  border-top-width:2px;
  height:50px;
  margin-top:-5px;
  clear:both;
}