Forum Moderators: open
I'm working on a website & my background image shows up when I test the code from my HDD, but when I load it to the server, it doesn't show.
I have posted the code below. Any help would be appreciated.
Thanks in advance;
Dan
= = = =
<!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>
<title>Life 101 Career Development Programs</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link href="1.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div id="banner">
</div>
<div id="left">
<div class="nav-box">
<div class="s1">
</div>
<div class="s2">
</div>
<div class="nav-box-text">
<span style="font-family:geneva,arial;color:#B8A07A;font-size:14px;font-weight:bold;padding-left:1px;"><a
href="#">Computer Skills</a></span>
<br />
<span style="font-family:geneva,arial;color:#6CA2BE;font-size:10px;font-weight:bold; font-style: italic;
letter-spacing: 2px;
padding-left:1px;"></span>
</div></div>
<div class="nav-box">
<div class="s1">
</div>
<div class="s2">
</div>
<div class="nav-box-text">
<span style="font-family:geneva,arial;color:#B8A07A;font-size:14px;font-weight:bold;padding-left:1px;"><a
href="#">Parenting Skills</a></span>
<br />
<span style="font-family:geneva,arial;color:#6CA2BE;font-size:10px;font-weight:bold; letter-spacing: 2px;
padding-left:1px;"></span>
</div></div>
<div class="nav-box">
<div class="s1">
</div>
<div class="s2">
</div>
<div class="nav-box-text">
<span style="font-family:geneva,arial;color:#B8A07A;font-size:14px;font-weight:bold;padding-left:1px;"><a
href="#">Entrepreneur Workshop</a></span>
<span style="font-family:geneva,arial;color:#6CA2BE;font-size:10px;font-weight:bold; letter-spacing: 2px;
padding-left:1px;"></span>
</div></div>
<div class="nav-box">
<div class="s1">
</div>
<div class="s2">
</div>
<div class="nav-box-text">
<span style="font-family:geneva,arial;color:#B8A07A;font-size:14px;font-weight:bold;padding-left:1px;"><a href="#">Youth
Activities</a></span>
<span style="font-family:geneva,arial;color:#6CA2BE;font-size:10px;font-weight:bold; letter-spacing: 2px;
padding-left:1px;"></span>
</div></div>
<div class="nav-box">
<div class="s1">
</div>
<div class="s2">
</div>
<div class="nav-box-text">
<span style="font-family:geneva,arial;color:#B8A07A;font-size:14px;font-weight:bold;padding-left:1px;">
<a href="#">Link</a></span>
<span style="font-family:geneva,arial;color:#6CA2BE;font-size:10px;font-weight:bold; letter-spacing: 2px;
padding-left:1px;">What is my purpose?</span>
</div></div>
<div class="nav-box">
<div class="s1">
</div>
<div class="s2">
</div>
<div class="nav-box-text">
<span style="font-family:geneva,arial;color:#B8A07A;font-size:14px;font-weight:bold;padding-left:1px;">
<a href="#">LINK</a></span>
<span style="font-family:geneva,arial;color:#6CA2BE;font-size:10px;font-weight:bold; letter-spacing: 2px;
padding-left:1px;">2006 entrepreneurs</span>
</div></div>
<div class="nav-box">
<div class="s1">
</div>
<div class="s2">
</div>
<div class="nav-box-text">
<span style="font-family:geneva,arial;color:#B8A07A;font-size:14px;font-weight:bold;padding-left:1px;">
<a href="#">Videos</a></span><br />
<span style="font-family:geneva,arial;color:#6CA2BE;font-size:10px;font-weight:bold; letter-spacing: 2px;
padding-left:1px;">More Text?</span>
</div></div>
</div>
<div class="content">
<p>
Welcome to (more content follows) </p>
<hr />
<div class="bottom"><a href="#"> HOME</a> ¦ <a href="#">LINK 1 </a>¦ <a href="#">Link2</a> ¦
<a href="#"> Contact us</a>
</div>
</div>
</div>
<br />
</body>
</html>
= = = = CSS follows
body {
background-image : url(picks/bgb2.jpg);
background-repeat : repeat-x;
line-height : 90%;
margin-top : 0;
background-color : #345fad;
color : #fff;
}
.container {
width : 731px;
border : 0 solid gray;
margin-top : 0px;
margin-left : auto;
margin-right : auto;
background-color : #ffffff;
}
#banner {
width : 731px;
height : 133px;
background-image : url(picks/banner-clouds.jpg);
}
.content {
height : 350px;
background-image : url(picks/cc.jpg);
background-repeat : no-repeat;
background-position : bottom right;
padding : 10px;
margin : 9px 0 0 140px;
font-family : times new roman;
color : #000;
font-size : 11px;
font-weight : normal;
letter-spacing : 2px;
border : 0 solid #e0dfdd;
}
img.right {
float : right;
padding : 0;
margin-right : 6px;
border : 1px solid #547fa9;
}
#left {
float : left;
width : 147px;
margin : 0 1px 0 0;
background-color : #fafce4;
}
.nav-box {
float : left;
width : 140px;
height : 55px;
margin : 0.2em 0 0 0.05em;
border : 1px solid #e0dfdd;
background-color : #ffffff;
}
.s1 {
float : left;
width : 4px;
height : 55px;
margin-left : 0.01em;
background-color : #b8a07a;
}
.s2 {
float : left;
width : 4px;
height : 55px;
margin-left : 0.05em;
background-color : #6ca2be;
}
.nav-box-text {
width : 100px;
height : 25px;
margin-top : .5em;
margin-left : 1.5em;
background-color : #fefdfb;
}
h1 {
font-size : 3em;
color : #4b5658;
margin-top : 5px;
padding : 1px;
border : 0 outset #95b7d0;
font-family : "times", verdana, arial, sans-serif, engravers mt bold;
}
a:hover {
color : #6ca2be;
text-decoration : none;
}
a {
color : #b8a07a;
text-decoration : none;
}
hr {
margin-top : 2.9em!important;
margin-top : 1.8em;
width : 500px;
}
.bottom {
margin-top : 1.5em;
margin-left : 8.5em;
}
1. On the server, do you have a directory named "picks" and have you upoloadded your background images to that folder?
2. Is your css file actually in the root directory?
3. Have you checked all file names and path names for any tpos?
I looked for typos & found my background was named BGB2.jpg,
but the CSS was looking for bgb2.jpg.
I changed the name & now it works. I didn't think CSS code was
case sensitive for an image name.
I didn't think CSS code was case sensitive for an image name.
CSS isn't specifically, but the underlying operating system may be. I assume you are running Windows on your local machine (which uses case-insensitive files names), but your server is probably Unix/Linux, which is case-sensitive.
Glad you found the answer!
