homepage Welcome to WebmasterWorld Guest from 54.242.200.172
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Accredited PayPal World Seller

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

CSS Forum

    
background image not working
background image
4css




msg:4122766
 12:14 pm on Apr 27, 2010 (gmt 0)

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




msg:4122787
 1:03 pm on Apr 27, 2010 (gmt 0)

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




msg:4122793
 1:17 pm on Apr 27, 2010 (gmt 0)

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




msg:4122808
 1:35 pm on Apr 27, 2010 (gmt 0)

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




msg:4122832
 2:06 pm on Apr 27, 2010 (gmt 0)

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




msg:4122840
 2:09 pm on Apr 27, 2010 (gmt 0)

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




msg:4122859
 2:24 pm on Apr 27, 2010 (gmt 0)

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




msg:4122923
 3:40 pm on Apr 27, 2010 (gmt 0)

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




msg:4122974
 4:25 pm on Apr 27, 2010 (gmt 0)

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




msg:4123021
 5:43 pm on Apr 27, 2010 (gmt 0)

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




msg:4123039
 6:01 pm on Apr 27, 2010 (gmt 0)

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




msg:4123110
 7:10 pm on Apr 27, 2010 (gmt 0)

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




msg:4123135
 7:40 pm on Apr 27, 2010 (gmt 0)

/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




msg:4123189
 9:00 pm on Apr 27, 2010 (gmt 0)

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




msg:4123208
 9:32 pm on Apr 27, 2010 (gmt 0)

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. :)

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved