adding a back ground image to list menu using css

Question

I've been doing a site for tafe and I've gone over different ways to do this and none of them have worked so far. I am trying to add a button image to a list menu using div id but it just seems not to be working. This demo page is a online version of my page, Image menu is suppose to be on the left hand side with the text over it.

I am trying to put a image in a unordered list as a background image and it doesn't appear to be working. I am trying to put it in this part of the css at the very ened

#navcontainer ul {
    padding: 0px;
    margin-left: 0px;
    list-style-type: none;
    width: 200px;
    display: block;
    line-height: 34px;
    background-image: url(images/pg_menu_bg.png);
}

Here is my html and my css:

<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation"><ul><li><a href="JavaScript:void(0);">HOME</a></li><li><a href="JavaScript:void(0);">NEWS</a></li>
<li>
<a href="JavaScript:void(0);">CONTACT</a></li><li><a href="JavaScript:void(0);">ABOUT</a></li></ul></div>
<div id="leftcolumn">
  <div id="navcontainer">
  <ul>
    <li><a href="JavaScript:void(0);">Upcoming Events</a></li>
    <li><a href="JavaScript:void(0);">Members</a></li>
    <li><a href="JavaScript:void(0);">Specials</a></li>
    <li><a href="JavaScript:void(0);">Who is Snap Nature</a></li>
    </ul>
  </div>
</div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>

CSS:

@charset "utf-8";
* {
    background-color: #6FF;
    margin: 0px;
    padding: 0px;
}
#wrapper {
    background-color: #F90;
    width: 960px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#header {
    background-color: #6F0;
    height: 124px;
    width: 960px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#navigation {
    background-color: #F3F;
    float: left;
    height: 25px;
    width: 960px;
}
#leftcolumn {
    background-color: #009;
    float: left;
    height: 350px;
    width: 250px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#content {
    background-color: #69F;
    width: 710px;
    float: left;
    height: 350px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#footer {
    background-color: #F00;
    clear: both;
    height: 25px;
    width: 960px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
#navigation ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 960px;
    height: 0px;
}
#navigation li {
    float: left;
    background-color: #F3F;
}
#navigation a {
    line-height: 25px;
    text-decoration: none;
    color: #000;
    background-color: #F3F;
    display: block;
    text-align: center;
    vertical-align: middle;
    width: auto;
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 0px;
    padding-bottom: 0px;
    height: 25px;
}

#navigation a:hover {
    color: #999;
    text-decoration: none;
}

#navcontainer ul {
    padding: 0px;
    margin-left: 0px;
    list-style-type: none;
    width: 200px;
    display: block;
    line-height: 34px;
    background-image: url(images/pg_menu_bg.png);
}

Please help TY Jared

Hi Jared. 2 things: #1 what problem are you having? is the image not appearing? Or is it not positioned correctly? Knowing this will help. #2 I'm pretty sure TAFE is an Australian thing only... :) — Jace, Apr 17 '13 at 05:19
my bad lol image not appearing. I am trying to use images/pg_menu_bg.png in a list like menu. — mjared, Apr 17 '13 at 05:21
#3: also sharing more specific code, rather than everything you have, makes it easier for us. Is it really required for us to know the CSS of your leftcolumn? your doctype? meta info? title? — Jace, Apr 17 '13 at 05:21

score 1 · Accepted Answer · edited May 23 '17 at 11:57

Edit:

Yes, this is exactly the problem. I just checked the link you posted, and the browser is looking for an image located at: http://www.156.onl.checit.info/CSS/images/pg_menu_bg.png - which doesn't exist.

See that "CSS" in there? I'm 99% sure that's unintentional. It's an absolute/relative path issue. Read on...

if your image is not appearing I'm gonna go out on a hunch and say it's because your image paths are messed up.

Solution:

This:

/* ABSOLUTE PATH solution */
background-image: url(/images/pg_menu_bg.png);

or maybe even this (depending on your file structure):

/* RELATIVE PATH solution. This is FROM YOUR CSS FILE.*/
background-image: url(../images/pg_menu_bg.png);

Explanation:

There is a big difference between:

background-image: url(images/pg_menu_bg.png);

and

background-image: url(/images/pg_menu_bg.png); /* note the leading slash */

The leading slash means an absolute path (ie. "path from your root domain url"), whereas no leading slash means a relative path (ie. "relative to the location of this file, in this case, your CSS file").

That means, presuming you have a file structure like this:

root
|
----images
       | pg_menu_bg.png
|
----css
       | mycss.css

from your css file, calling:

background-image: url(images/pg_menu_bg.png);

actually results in:

http://yourdomain.com/css/images/pg_menu_bg.png /* note the "css" */

whereas calling:

background-image: url(/images/pg_menu_bg.png);

results in:

http://yourdomain.com/images/pg_menu_bg.png

So I think you need to have a look at your directory structure, and work from there. My guess is you need to use absolute paths.

But if you wanted to use relative paths with the dummy file structure above, you can use:

background-image: url(../images/pg_menu_bg.png); /* ".." means "parent directory"

More info:
Using relative URL in CSS file, what location is it relative to?

Second problem:

You have another issue, this style:

* {
    background-color: #6FF;
    margin: 0px;
    padding: 0px;
}

This style applies a blue background TO EVERY ELEMENT. So even if your paths to that background image are ok, they're being hidden by foreground elements with blue backgrounds.

Try change * to body:

body {
    background-color: #6FF;
    margin: 0px;
    padding: 0px;
}

Note: if you actually want a margin:0; and padding:0; on every element, leave the above style as you had it (but remove the background-color), and define a new body style and put the background-color in there instead. Like this:

* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: #6FF;
}

I was using /images/pg_menu_bg.png because site was on that path but I tried both methods and neither have worked. — mjared, Apr 17 '13 at 05:38
@mjared You have two issues, so change the path like i suggested, and see my edit under "Second Problem" at the end of my answer — Jace, Apr 17 '13 at 05:42
lol ty yea that was the problem, that was why the background image wasn't working. Can u help me with this please. — mjared, Apr 17 '13 at 05:58
if my site is at mysite.com and my css sheets are at www.mysite.com/css and image at www.mysite.com/images/ would the patsh be ../images/imagename.gif and for css be /css/style.css — mjared, Apr 17 '13 at 06:00
not `../images/imagename.gif`, lose the dots: `/images/imagename.gif` and your css one is correct. I see where you might have been confused, improving my answer. — Jace, Apr 17 '13 at 06:02
@mjared no problem, if you feel it appropriate please consider upvoting and marking this as answer (when you are able to). — Jace, Apr 17 '13 at 06:07
I agree with Jace. For your error inspection: To confirm image created path as suggested by you in your css inspect that element and open url image in new tab that will show you current generated path, which will not be correct. SO you can easily understand the difference between your original image path and current generated path and use Jace illustrated way to get image right path. — Taimoor Changaiz, Apr 17 '13 at 06:18

adding a back ground image to list menu using css

1 Answers1