Welcome to WebmasterWorld Guest from 50.16.78.128

Forum Moderators: not2easy

Message Too Old, No Replies

Div background image not showing up

   
5:12 pm on Jul 26, 2010 (gmt 0)

5+ Year Member



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

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

<!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>
5:27 pm on Jul 26, 2010 (gmt 0)

WebmasterWorld Senior Member



Without digging deeply into the CSS maybe it's the double images/images...

#leftnav {
height: 582px;
width: 445px;
float:left;
background-image: url('images/images/leftnav.jpg');
}
5:30 pm on Jul 26, 2010 (gmt 0)

5+ Year Member



Thanks. It's not that, I changed it to this

background-image:url('leftnav.jpg');

and put the image in the main directory, and it's still blank, any more help greatly appreciated. Thanks for looking. Derek
5:50 pm on Jul 26, 2010 (gmt 0)

WebmasterWorld Senior Member



Well I just whipped up a mockup here as you have it pasted and it displays without problem in Firefox & IE so maybe check the uppercase/lowercase spelling? Clear you cache too maybe.
12:53 pm on Jul 27, 2010 (gmt 0)



Make sure the name of the file is still "leftnav.jpg" and not one of the following:

"left nav.jpg"
"leftnav.JPG"
"leftnav.jpeg"
"left nav.JPG"

or, any other variation. Also, make sure the file extension is a ".jpg" and not some other image format. Some images can become corrupted when uploaded by FTP if ASCII is used and not binary.
1:49 pm on Jul 29, 2010 (gmt 0)



#leftnav{
height:582px;
width:445px;
float:left;
background-image:url('leftnav.jpg')}

You aren't defining the position, IE position:relative.

Also, you're sure the image has the dimensions of 445x582?

You could also try changing it to
background-image:url('/leftnav.jpg');
1:52 pm on Jul 29, 2010 (gmt 0)



I forgot to add this, but, I usually don't define background images with background-image:url(''); as it has created issues in the past. I just use background:url(''); which works just fine.
2:21 pm on Jul 29, 2010 (gmt 0)



By default, background:url('');, would allow the browsers to use their default positiong and to tile the image starting at top, left if the container is big enough. It is always best to tell browsers exactly what you want them to do.

background: #fff url('path to image') no-repeat center scroll;

background: #fff url('path to image') repeat top left scroll;

background: #fff url('path to image') no-repeat top center fixed;

Or, some other variation thereof. A width and height for the background image should be given. Especially if it is not a tiled image.
6:43 pm on Jul 29, 2010 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Also try removing the quotes on url(), they are not necessary and have seen it be the factor in some cases.