How to use relative/absolute paths in css URLs?

css relative-path absolute-path
johnlemon picture johnlemon · Apr 28, 2011 · Viewed 172k times · Source

I have a production and development server. The problem is the directory structure.

Development:

  • http://dev.com/subdir/images/image.jpg
  • http://dev.com/subdir/resources/css/style.css

Production:

  • http://live.com/images/image.jpg
  • http://live.com/resources/css/style.css

How can I have a style.css in css folder that uses on both servers the same path for the background: url property? Is there a trick I can use with relative paths?

Answer

Kobi picture Kobi · Apr 28, 2011

The URL is relative to the location of the CSS file, so this should work for you:

url('../../images/image.jpg')

The relative URL goes two folders back, and then to the images folder - it should work for both cases, as long as the structure is the same.

From https://www.w3.org/TR/CSS1/#url:

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

Related questions

Failed to load resource: the server responded with a status of 404 (Not Found)

I can't solve my link problem. Could you help on to this to link CSS and JS File? CSS: <link href="../Jquery/jquery.multiselect.css" rel="stylesheet"/> <link href="../Jquery/style.css" rel="stylesheet" /> <link …

Read More
How to go up a level in the src path of a URL in HTML?

I am storing style sheets in {root}/styles while images in {root}/images for a website. How do I give the path in the style sheets to go look in the images directory for the specified images? e.g. In …

Read More
MVC Bundling and CSS relative URLs

MVC's bundling is returning the wrong URL in CSS images when using CssRewriteUrlTransform: I have an intranet application whose URL is, for example: http://usid01-srv002/MyApplication. It's in IIS's "Default Web Site". Which has the following in BundleConfig.cs: …

Read More