471,624 Members | 1,902 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,624 software developers and data experts.

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

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

Expand|Select|Wrap|Line Numbers
  1. #content-wrapper-1 {
  2.     background-color: #d8f5fd;
  3.     background-image: url(/images/backgrounds/content-1.png);
  4.     background-repeat: repeat-y;
  5.     background-position: center 0;
my image is not displaying:
Expand|Select|Wrap|Line Numbers
  1.  <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.
Aug 24 '08 #1
5 3887
eWish
971 Expert 512MB
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
Aug 24 '08 #2
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.
Aug 24 '08 #3
David Laakso
397 Expert 256MB
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
Expand|Select|Wrap|Line Numbers
  1. Try: ../
  2. background-image: url(../images/backgrounds/content-1.png);
  3. Or: no first forward slash
  4. background-image: url(images/backgrounds/content-1.png);
  5.  
Aug 24 '08 #4
drhowarddrfine
7,435 Expert 4TB
A leading slash always indicates 'root' while ../ always indicates one level up from the current directory.
Aug 24 '08 #5
eWish
971 Expert 512MB
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
Aug 24 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

3 posts views Thread by Peter Taurins | last post: by
4 posts views Thread by Bernie Raffe | last post: by
15 posts views Thread by Jameson | last post: by
4 posts views Thread by JoJo | last post: by
12 posts views Thread by John Kotuby | last post: by
3 posts views Thread by ABCL | last post: by
3 posts views Thread by John Kotuby | last post: by
1 post views Thread by XIAOLAOHU | last post: by
1 post views Thread by ZEDKYRIE | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.