images not displaying on my site - relative image paths in CSS

[kbnolan]

I'm somewhat new to this so I know there is something easy I'm missing. I'm editing an existing html page that was built with primarily with css. I have to work with the existing structure and not change it.

The background is in this style

#content-wrapper-1 {
    background-color: #d8f5fd;
    background-image: url(/images/backgrounds/content-1.png);
    background-repeat: repeat-y;
    background-position: center 0;

my image is not displaying:

 <div id="content-wrapper-1"> </div>

Can you tell me what the difference is when I have my image path start with a "/" (example /images/backgrounds/content-1.png) verses " ..//" (which I understand means go up one directory and then go into the folders indicated) verses ( foldername/image.gif), which I know means go into that folder and find the image.

I can't move the folder structure around, so I need to figure out how to navigate to the images.

Thanks for any help. Sorry if this is a very basic question.

[eWish]

Do you have content in the div 'content-wrapper-1'? Are the images in the proper directory? What browser are you using because IE has issues with displaying png files that are transparent. I would suggest that you use an absolute url.

--Kevin

[kbnolan]

Yes, I do have content in the wrapper, and I'm trying to follow the existing code, so I didn't want to change the way it was done

if the image path is written: /images/backgrounds/content-wrapper-1.png

what does the slash in front of images mean? maybe I don't have them set up correctly.

[David Laakso]

Yes, I do have content in the wrapper, and I'm trying to follow the existing code, so I didn't want to change the way it was done

if the image path is written: /images/backgrounds/content-wrapper-1.png

what does the slash in front of images mean? maybe I don't have them set up correctly.

Seek the directory...

Use your editor to find the image and set its path, or try these manually

Try: ../
background-image: url(../images/backgrounds/content-1.png);
Or: no first forward slash
background-image: url(images/backgrounds/content-1.png);

[drhowarddrfine]

A leading slash always indicates 'root' while ../ always indicates one level up from the current directory.

[eWish]

The single forward slash at the beginning means to point to the root directory.

Two dots ("..") are used for moving up in the hierarchy, to indicate the parent directory; one dot (".") represents the directory itself. Both can be components of a complex relative path (e.g., "../mark/./bobapples"), where "." alone or as the first component of such a relative path represents the working directory. (Using "./foo" to refer to a file "foo" in the current working directory can sometimes be useful to distinguish it from a resource "foo" to be found in a default directory or by other means; for example, to view a specific version of a man page instead of the one installed in the system.)

--Kevin