homepage Welcome to WebmasterWorld Guest from 54.163.139.36
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Div background image not showing up
silverglade

5+ Year Member



 
Msg#: 4176733 posted 5:12 pm on Jul 26, 2010 (gmt 0)

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>

 

SevenCubed

WebmasterWorld Senior Member



 
Msg#: 4176733 posted 5:27 pm on Jul 26, 2010 (gmt 0)

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');
}

silverglade

5+ Year Member



 
Msg#: 4176733 posted 5:30 pm on Jul 26, 2010 (gmt 0)

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

SevenCubed

WebmasterWorld Senior Member



 
Msg#: 4176733 posted 5:50 pm on Jul 26, 2010 (gmt 0)

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.

Major_Payne



 
Msg#: 4176733 posted 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.

brokenbynubs



 
Msg#: 4176733 posted 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');

brokenbynubs



 
Msg#: 4176733 posted 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.

Major_Payne



 
Msg#: 4176733 posted 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.

rocknbil

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



 
Msg#: 4176733 posted 6:43 pm on Jul 29, 2010 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved