...

View Full Version : CSS - Cant get a background-image to display behind a UL



danielwarner
07-25-2007, 03:19 PM
As the title says, i want a background image to repeat-x across the back end of all my list-items but i either have a bug or i cant do this for some reason...

Heres the code, i wonder if anyone can help...

Question: Is there actually an image behind "images/nav.center.gif"?
Answer: Yup!

Hosted online: http://www.southparksugardaddy.com/helpme!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<title>UK Pass Fast &bull; Your guide to passing your theory test quickly!</title>
<style type="text/css">
body {
background-color:#fff;
background-image:url(images/background.gif);
background-repeat:repeat-x;
margin:0;padding:0;
font-family:verdana;
font-size:13px;
}
img { border:0 }
#header {
border-bottom:5px solid #4A4949;
background-color:#6C6C6C;
height:118px;
background-image:url(images/nav.bg.gif);
background-repeat:no-repeat;
background-position:bottom right;
}
#logo {
background-image:url(images/logo.gif);
background-repeat:no-repeat;
background-position:bottom left;
width:810px;
margin:0 auto;
height:118px;
}
#logo ul {
margin:0;padding:0;
list-style-type:none;
position:relative;
top:88px;
left:172px;
_margin-top:88px;
_margin-left:172px;
background-image:url(images/nav.center.gif);
}
#logo ul li {
float:left;
height:30px;
border-right:1px solid #6C6C6C;
background-image:url(images/nav.left.gif);
background-repeat:no-repeat;
padding:0 0 0 3px;
}
#logo ul li a {
padding:0 10px;
height:30px;
line-height:30px;
background-image:url(images/nav.right.gif);
background-repeat:no-repeat;
background-position:center right;
color:#fff;
text-decoration:none;
text-transform:uppercase;
display:block;
_width:20px;
white-space:nowrap;
}
#container {
width:728px;
border-left:1px solid #8C9CB1;
border-right:1px solid #8C9CB1;
border-bottom:1px solid #8C9CB1;
background-color:#fff;
margin:0 auto;
background-image:url(images/bar.gif);
background-position:top center;
background-repeat:no-repeat;
padding:30px 10px 10px;
}
</style>
</head>
<body>
<div id="header">
<div id="logo">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Practise Tests</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">Other</a></li>
<li><a href="#">Documentation</a></li>
</ul>
</div>
</div>
<div id="container">
<br/><br/><br/>
</div>
</body>
</html>

medigerati
07-25-2007, 03:42 PM
I think the problem is in the filename and not the CSS. This is just a guess, but I'm pretty sure you can't have two periods in the filename, only one for the file extension. Try using dashes instead.

If you still need the extra periods, try adding quotation marks around the filename. For example:

background-image:url("images/nav.bg.gif");

danielwarner
07-25-2007, 05:05 PM
Neither of those helped...but thanks for trying.

Anyone else?

medigerati
07-25-2007, 05:28 PM
Assuming you want the repeated background image to be the one on the UL, you need to add a height to it for it to show. This is because your LI's are floated so they don't cause the UL to expand. Try this:


#logo ul {
margin:0;padding:0;
list-style-type:none;
position:relative;
top:88px;
left:172px;
_margin-top:88px;
_margin-left:172px;
background-image:url(images/nav.center.gif);
height: 30px;
}

This leads to some other issues but fixes the background image not showing. I don't know if you've read this article, but A List Apart (http://www.alistapart.com) has a tutorial on "Sliding door" navigation (http://www.alistapart.com/articles/slidingdoors/) that can fix some of the issues here.

Good Luck!

danielwarner
07-25-2007, 05:32 PM
Oh yeah how could i forget that!

Thanks alot medigerati, i added to your reputation!

medigerati
07-25-2007, 05:39 PM
My pleasure and thanks for the rating. Let me know if you need any more help with it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum