CSS URL References And URL Rewriting

0 comments suggest edit

I can get a bit overboard with my virtual paths. I tend to prefer virtual paths over relative paths since they feel safer to use. For example, when applying a background image via CSS, I will tend to do this:

``

body

{

    background: url(‘/images/bg.gif’);

}

My thinking was that since much of the code I write employs URL rewriting and Masterpages, I never know what the url of the page will be that references this css. However my thinking was wrong.

One problem I ran into is that on my development box, I tended to run this code in a virtual directory. For example, I have Subtext running in the virtual directory /Subtext.Web. So I end up changing the CSS like so:

``

body

{

    background: url(‘/Subtext.Web/images/bg.gif’);

}

Thus when I deploy to my web server, which is hosted on a root website, I have to remove the /Subtext.Web part. Now if I had read the CSS spec more closely, I would have noticed the following line:

Partial URLs are interpreted relative to the source of the style sheet, not relative to the document.

Thus, the correct CSS in my case (assuming my css file is in the root of the virtual application) is…

``

body

{

    background: url(‘images/bg.gif’);

}

Now I have true portability between my dev box and my production box.

It turns out that Netscape Navigator 4.x incorrectly interprets partial URLs relative to the html document that references the css file and not the css file itself. Perhaps this was where I got the wrongheaded notion embedded in my head way back in the day.

Found a typo or error? Suggest an edit! If accepted, your contribution is listed automatically here.

Comments

avatar

17 responses

  1. Avatar for Alex
    Alex January 12th, 2006

    One problem you might encounter.. is that the following style for example :



    table

    {

    behavior: url('htc/grid.htc')

    }



    actually doesn't work by the css specification



    ( as I understood , it's because htc is MS standart and they didn't care much about the css spec in this case )



    so in this case it's actually relative to the document and not the source of the style sheet .



    There are ways to work this out .. but they are pretty ugly..





  2. Avatar for Haacked
    Haacked January 12th, 2006

    Ah... good to know.

  3. Avatar for alain
    alain April 20th, 2006

    Alex, I've exactly the problem you're talking about with htc files.
    What are the ugly workaround you're talking abount?
    Today, I use absolute url but each time I deploy my webapplication on a different context, (like www.xxx.com/dev and www.xxx.com/prod) I must rename the url inside several css files.
    Is there something nicer to do?

  4. Avatar for Andrzej Sawicki
    Andrzej Sawicki February 3rd, 2007

    the url() is relative to where a css is stored not the virtual directory.
    you can use ../ in order to get up directory and find the image
    in my case this was
    ../images/something.png
    andrzej

  5. Avatar for BILL
    BILL September 25th, 2007

    IS IT POSSIBLE TO SPECIFY THE SIZE OF THE (IMAGE URL IN CSS). THX

  6. Avatar for Hanan
    Hanan November 28th, 2007

    You have saved my day.
    thanks !

  7. Avatar for Mike
    Mike December 18th, 2007

    So simple, yet so undocumented. Thanks.

  8. Avatar for hucks
    hucks April 8th, 2008

    is it possible to make my logo in the template.css file linkable to the main site.
    so when i click the logo the page reloads,
    my regards hucks.

  9. Avatar for sendi
    sendi July 23rd, 2008

    this post helped me. Thank you for sharing

  10. Avatar for Carlos
    Carlos August 11th, 2008

    It's good! It helped me too, thanks.

  11. Avatar for Rick
    Rick August 21st, 2008

    Awesome, thanks for the help friend.

  12. Avatar for TN
    TN December 2nd, 2008

    Just to share my observation regarding usage of url() *for .htc files*
    IE7 interprets the path to .htc file in url() function like this
    - absolute path (e.g. behavior=url('/styles/HiLite.htc')) won't work
    - relative path is relative to the web page (.aspx .php etc files) that use the stylesheet. Note that for ASP.NET even if the master page is used the relative path is still *relative* to the content file

  13. Avatar for dotnetguts
    dotnetguts May 16th, 2010

    Did anyone found solution how to access .htc file from .css?
    Specially when you are doing URL Rewriting.
    In my .Net Project i can able to access .htc file when page is not URL Rewritten, but when I tried to access .htc file for page that is URL Rewritten its not working!
    I have tried almost all tricks, anybody any idea?

  14. Avatar for bob e
    bob e April 8th, 2011

    I have the same problem with my ASP.NET app :(
    I do the rewriting and my images don't show up even with full path

  15. Avatar for Phani
    Phani November 20th, 2011

    Hi All,
    Has any one found the solution for refering the .htc from css
    I have tried all the options i know of. here below I am giving the options i have tried with
    behavior: url(c://inetpub//wwwroot//piewebsite//css//PIE.htc');
    behavior: url(../css/PIE.htc');
    behavior: url(PIE.htc');
    behavior: url('http://localhost/piewebsite/PIE.htc');
    No Luck with all the options.
    Is there any thing I am missing in here.

  16. Avatar for David Legg
    David Legg September 20th, 2013

    there is an inelegant work around.
    override the behavior attribute with a correct relative path if it differs from the base definition.
    i.e. in my case, most pages are in the root of the web site with the PIE.htc files in a subfolder name PIE.
    primary style sheet uses behavior: url(PIE/PIE.htc); where needed.
    sheets in a subfolder will not be able to get the effects for the PIE package when they use features including the above definition, so add additional CSS that changes the definition to behavior:url(../PIE/PIE.htd);

  17. Avatar for Chris
    Chris September 29th, 2016

    LOL! Google has this on Page #1 for "css url function"
    29-Sep-2016