CSS Forum

**silverglade** · 07-26-2010, 01:52 PM

Hi, I have a div background image and it's not showing up, Any help GREATLY appreciated as I've been staring at this for almost an hour. LOL. The problem div is "leftnav".

here is the css for the page

Code:

body {
   font-family: Times New Roman, Times, serif;
   background-color: black;
   color: white;
}
td {
   font-family: Arial, Helvetica, sans-serif;
}
a:link {   color: gold; }
a:visited {   color:gold; }
a:active {   color: gold; }
.tiny { font-size: 8pt; }
.small { font-size: .8em; }
.nounder { text-decoration: none; }
input.text, textarea {
   border: 1px black solid;
   font-family: Arial, Helvetica,  sans-serif;
   font-size: 10pt;
}
input.button {
   border: 2px gold solid;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 10pt;
   font-weight: bold;
   background-color: #FFFFFF;
   color: #gold;
}

div.rcm {
   position: absolute;
   font-family: Arial;
   font-size: 10pt;
   border: 1px solid gold;
   background: black;
   display: none;
}

 
.black,.red {
   font-weight: bold;
   color: black;
   font-size: smaller;
}


img.item {
   border: 0px;
   height: 30px;
   width: 30px;
   vertical-align: middle;
}
div.effect td.effect { font-size: 8pt; }

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


#container {

margin: 0 auto 0 auto;
width: 899px;
height: 748px;
}
#header {
width: 882px;
height: 166px;
}
#leftnav {
   height: 582px;
   width: 445px;
   float:left;
   background-image: url('images/images/leftnav.jpg');
 
}

#rightpic {
height: 576px;
width: 438px;

float:left;
}

and here is the html page

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Realm of the Sun Dragon</title>
<link rel="stylesheet" type="text/css" href="css/mainpage.css">
</head>

<body>

<div id="container">
<div id="header"> <img src="images/images/header.jpg" alt="Realm of the Sun Dragon" /></div>
<!--end header-->
<div id="leftnav"> </div><!--end leftnav-->
<div  id="rightpic"> <img src="images/images/rightpic.jpg" alt="Realm  of the Sun Dragon" /></div><!--end rightpic-->








</div><!--end container-->
</body>
</html>

**chrishirst** · 07-26-2010, 04:12 PM

drop the quotes from around the image URI

**silverglade** · 07-26-2010, 04:22 PM

thanks Chris. I dropped the quotes and it still doesn't show up. I even tried moving the image to the main directory where the index.php is and it won't show, only my img src's show. Any more help GREATLY appreciated as I've had this problem for about 5 hours. LOL. Thanks. Derek

**menace-** · 07-26-2010, 04:54 PM

Quote:

Originally Posted by silverglade

Code:

   background-image: url(..images/images/leftnav.jpg);

Try that, I'm assuming your stylesheet isn't in your images folder? Hope that helps

**chrishirst** · 07-26-2010, 05:09 PM

the not the syntax but add a slash "/" to the front of images to make it a root relative path.

**ModDish** · 07-26-2010, 05:19 PM

you sure leftnav.jpg is in images/images/leftnav.jpg from the current location?

try going to yoursite.com/images/images/leftnav.jpg to make sure you have the image in the correct location.

**silverglade** · 07-26-2010, 05:49 PM

Chris YOU ARE ONCE AGAIN DA MAN!!! HAHAHAH after like 6 hours of this crap, You did it. Thank you so much! Derek