CSS background using relative path

Folks,

I'm trying to make a header using a CSS background.
I've organized files into folders like this:

Website Root (all htm files here)
includes (css and .inc text files)
images (pictures)
...
Documents (pdf, .docs, etc)

My css file is in the "includes" folder. The background image is in the "images" folder (of all places).

When I refer to the image using a relative path like "../Images/MyBanner.jpg" Foxfire displays nothing but IE shows the picture. This path is relative to the includes folder where the css is located.

If I use a path of "Images/MyBanner.jpg", FoxFire finds the picture but IE doesn't. This path is relative to the root. If I use an absolute path both find it fine but this not what I want.

I could also move the css file into the root but this is not how I want the files organized. Has anyone experienced this before? This seems pretty fundamental. What would be the standard?

OldHippyDude

Both the css and the xhtml pass validation.

The css file SiteStyle.css contains only the following:

#header{
display:block;
position :relative ;
float:right ;
width:656px ;
height:220px;
margin-right:100px;
background-color:White;
background:url("../Images/MyBanner.jpg") no-repeat;
border-style:double;
border-width:thick;
z-index:1;
}

#header hr
{
display:block;
position:absolute;
top:207px;width:656px;color:#ff0000;
}

The xhtml consists of the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Bubba's Big Baptist Church and Barbeque</title>
...
<link rel="stylesheet" href="Includes\SiteStyle.css" media="all" type="text/css" />
</head>
<Body>
<div>
<div id="header">
<hr /> 
</div>
 
</div>
<\Body>

CSS background using relative path

Firefox can't find image using relative path

OldHippyDude

Marshall

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week