Question

I am trying to include a background image using a relative link in the css.

My tree looks like this

/_css
/_css/gcrm.css
/_images
/_images/bg-grad1.gif

The css I am using to use to call it is like so

background-image: url(../_images/bg-grad1.gif);

It displays as expected in Visual Web Developer however when I put it on the web, no background. When I inspect element in Chrome this is the linked file

mysite.com/_css/../_images/bg-grad.gif

Unfortunately I cannot link to it with the / root as I am trying to setup SSL and my hosting company has allowed us to use as shared cert that mirrors the site 1 level deep in the domain tree.

I must be missing something incredibly simple but I can’t figure out what it is to get it working.

Answer 1

Your url looks fine in regards to your file structure. Assuming this is your file structure:

/_css/
    ...
    gcrm.css
    ...

/_images/
    ...
    bg-grad1.gif
    ...

From the fact that it’s actually outputting the .. in the url in the code, maybe you need to enclose the url in quotes:

background-image: url("../_images/bg-grad1.gif");