background image not working

background image

[4css]

I have a page on my system that works in one file, but not in the other. The only thing that is different between the two files is that I have one page where the style sheet is embedded, and the other is linked.

The one that works is where the style sheet is embedded. The linked doesn't work.
-----------------
Here is the css:

html, body {
font-size: 100.01%;
font-family: Arial, Verdan, sans-serif;
text-align: center;
margin-top: 5px;
background-image: url(images/background1.gif);
background-color: #FFDFDF;
color: #000;
}

* {
margin: 0px;
padding: 0px;
border: 0px;
list-style-type: none;
}
div#header {
width: 774px;
height: 300px;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
background-color: #FFDFDF;
}
div#hdrnav {
width: 774px;
height: 25px;
float: left;
}
div#mainwrapper {
width: 774px;
margin-right: auto;
margin-bottom: .665em;
margin-left: auto;
background-color: #F8E6E4;
color: #000;
text-align: left;
}
div#content {
width: 570px;
float: left;
}
div#content p {
text-indent: .875em;
line-height: 1.25em;
margin-top: .74em;
margin-right: .875em;
margin-left: .875em;
}
/*begin navigation styles*/
div#sidenav {
width: 200px;
float: left;
background-color: #FFDFDF;
}
div#sidenav {
width:125px;
float: left;
}
div#sidenav li {
display: in-line-block;
list-style-type: none;
padding-top: 15px;
padding-bottom: 15px;
margin-left: 2px;
border-bottom: 1px solid black;
}
div#sidenav li a {
padding-left: 20px;
text-decoration: none;
color: #BA3836;
font-size: .775em;
font-weight: bold;
}
div#sidenav li a:hover {
color: #84303D;
font-size: .775em;
font-weight: bold;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* \ */
* html .clearfix {height: 1%;display: block;}
/* */
div#footer {
width: 774px;
float: left;
text-align: center;
font-size: .775em;
}
-------------------

I'm baffled and am going back and forth trying to figure it out. Any help would be appreciated.

The image is located in the image file in both file sections, so there isn't anything changed with this either.

Thanks in advance.

[Fotiman]

background-image: url(images/background1.gif);

Is your CSS file in the same directory as your html page, or is it in some other directory? If it's in another directory, then you need to modify the path to be relative to that CSS file. For example, suppose the following file structure:

/index.htm
/images/background1.gif
/css/style.css

With that structure, you'd want your background rule to be something like this:

background-image: url(../images/background1.gif);

Alternatively, you could use a path relative to the root of the site (which is what I prefer because then it doesn't matter if you move the CSS to a different path):

background-image: url(/images/background1.gif);

[4css]

Hi Fotiman, thanks for your reply.

All the other images work and are in the same file structure. The image for the header works fine so the code should be ok for the file structure.

I have changed things as you stated, using the /images/background1.gif, however that didn't work either, which I didn't think it would.

I have the folder with the files/pages that I am working on, and then the images folder where the images are.

I'm totally lost on this one. Especially since it worked (and still does on the original page) with it being embeded.

I did change the layout a bit, main wrapper and putting all things into this main wrapper, however, that should not have interfered with anything.

I'm totally stumped here.

thanks again for your reply, I do appreciate it.

[4css]

Just an added note, all xhtml validates, and the css validates except for the display:inline-block on the nav, which shouldn't interfere with the images

[4css]

resolved:

../images/background1.gif

For some strange reason this path (images/background1.gif)should not have worked in the original folder, but it did. There are several folders before the images folder so the path has to go up past those folders. (I hope I am typing this correctly.) When I moved it, it didn't work. It shouldn't have worked in the original folder either.

owner edit to change wording

[Fotiman]

I'm not entirely sure what you mean, but it sounds like you got it resolved, so that's good. And it sounds like it was just a path issue to get to the image. Glad you got it working.

[4css]

I suppose what I am trying to say is that the file structure was the same in the original folder that I had the page in, so I don't understand why the background image showed up. It shouldn't have. Hope this makes sense this time.

[Fotiman]

What was the file structure? Can you give an example of what it was from the root? For example:

/originalHTMLdoc.htm
/images/background1.gif
/cssfile.css

[4css]

original folder has folders in it that are
1. styles 2 presentational 3 images
then the pages that I am working on are listed below these. (the file path to the image was background-image: url(images/background1.gif);

The folder I moved them to are:

1presentational 2. images and then 3 css

and again, the pages would be listed under these folders.

So, why did it work in the original folder that I had them in but not when I moved them? This is just kind of bugging me.

Hmm, different location of the images folder?

[rocknbil]

4css: I *think* I may know what's going on. :-) This is pretty common.

When you are looking at files offline this will work

../images/background1.gif

and this will not.

/images/background1.gif

This is because unless you're running a local server, the computer you're on is NOT a server and browsers can't distinguish the meaning of the opening forward slash, which generally means "start at the domain root." For local files, there **is** no domain root, only folders/directories. Even if it "does something," that "something" is likely to be the root of the C: drive, and you won't have an images directory there (theory, never tested this . . . )

When uploaded to a server, this

/images/background1.gif

should work. If it does not, it may mean something else, that for your server the "domain root" is not really /. It could be a subdomain, a virtual server config, hard to tell. That is, / may not actually be "domainname.com home."

[4css]

thanks rocknbil,
I appreciate your reply.

So, when I load this up on the server I might have to change how I have this set up right now with the path?

Sorry for such a simple question but it has been a while since I have coded and am trying to get back to it.

Thanks again for your reply, it is greatly appreciated!

Have a great day!

[Fotiman]

I'm still trying to understand your setup.

original folder has folders in it that are
1. styles 2 presentational 3 images

Ok, so your directory structure looks like this:
/styles/
/presentational/
/images/

Correct?

then the pages that I am working on are listed below these.

Like this?
/styles/YOURCSSFILE.css
/presentational/YOURHTMLFILE.htm
/images/background1.gif

If that was the case, then it should not have worked, regardless of whether the styles were defined inline in YOURHTMLFILE.htm or when they were moved to YOURCSSFILE.css, because neither of those paths has an "images" subfolder. If you could just write your actual paths, it would save all of this guess work I'm having to do.

The folder I moved them to are:

1presentational 2. images and then 3 css

and again, the pages would be listed under these folders.

So your new directory structure looks like this?
/css/YOURCSSFILE.css
/presentational/YOURHTMLFILE.htm
/images/background1.gif

[4css]

/css/css file

/presentational/presentational images

/images/background1.gif

So, the folder debssite contains all the above folders (on my computer now, not on the server) along with the pages-html files that I am working on. (index, about, home etc..)
I'm not sure if this makes any sense now or not.

All my design things that I work on are on their own hard drive on the computer. say D drive. And each site that I work on has it's own folder with sub folders in it for images and styles and the pages that I work on.

[Fotiman]

So originally, you had in your html file the CSS that included a background image:

background-image: url(images/background1.gif);

From the location of your html file, there IS an images directory in the same location, so that worked.

However, you then moved the CSS out into a CSS file in the /css/ folder. So when it tried to find an "images" folder within that folder, it couldn't find one (it's searching relative to the CSS file, NOT relative to your HTML document). This is why I was saying that if you had preceeded it with "../", then it would navigate up one folder (which would be the original location of the HTML file) and then from there look for an images folder (which it would find).

Do you understand now?

[4css]

Yes Fotiman, that is why I went with the suggestion that you gave. When I went into the place where I have everything stored, it clicked as to why it wasn't working and what you said made sense. :)