CODEWITHSUNDEEP
phpcssapachepathrelative-path
vagu
vagu

Reputation: 21

relative path not working for images in css

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?

Upvotes: 2

Views: 9864

Answers (4)

Your Common Sense
Your Common Sense

Reputation: 158007

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.

Upvotes: -4

michael
michael

Reputation: 4483

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?

Upvotes: 7

bob-the-destroyer
bob-the-destroyer

Reputation: 3154

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.

Upvotes: 2

Quentin
Quentin

Reputation: 944530

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.

Upvotes: 0

Related Questions