relative path not working for images in css

Question

I have the following file structure:

C:/wamp/myproject/admin/webroot/images

I have an index.php file lying inside the admin folder which calls a header.inc.php file lying in the same folder. header.inc.php has the following code-

<td align="left" valign="top" class="header-bg">
<table width="100%" border="0" cellspacing="0" cellpadding="0">

index.php calls a css file (css.css) through the following code:

<link href="<?php echo (WS_DIR_CSS); ?>/css.css" rel="stylesheet" type="text/css" />

The css lies in the following location: C:/wamp/myproject/admin/webroot/css

The css files has a class which has the following code:

.header-bg {
  background:url(../images/header_bg.jpg) left top repeat-x;
  height:77px;
}

The image header_bg.jpg is not being displayed in the browser. Help anyone?

Answer 1

Relative addressing is not working by design.
That's why one should use absolute address.

1. Make yourself know what is actual header_bg.jpg address relative to site root.
   /images/header_bg.jpg for example.
2. Use that address.
   With or without WS_DIR_CSS helper, but in the HTML code it must be /images/header_bg.jpg or whatever absolute address is.

Answer 2

Look in your server logs to see which files is actually being requested. It's quite likely that you've got your URLs mixed up somewhere along the way.

Answer 3

the image is included relative to the css

if your image lives here...

/images

and your css lives here...

/somefolder/css/style.css

then the rule would be

background-image:url( ../../images/header_bg.jpg );

Can you check the element using firebug? Are there any rewrite rules that may be rerouting the request? Do you have read permissions on the image?

Answer 4

The image header_bg.jpg is not being displayed in the browser.

There are a hundred possible reasons: from your browser set to block images, filesystem permissions denying read-access on the server. Without knowing several more important details, a good start is figuring out if you're browser even tries to get the image. This is where Firebug (via Firefox add-ons), or some other like browser plugin comes in handy.