CSS: background-images base

Is it possible to enter a base tag/declaration in CSS, something like in HTML? I need one because I use mod_rewrite and the url looks like that: domain.com/path/to/something/

So my background images aren't loading right (just index/home-page). All I can think of is to add the whole domain 开发者_运维百科(which I have to change every time I update CSS on my webspace) but that I won't like to do.

If you put the CSS in a style sheet, the paths are relative to the location of the style sheet file, not relative to the page.

For example, if you have a style sheet at /css/global.css and an image at /images/logo.gif, you would reference the style sheet from the page like this:

<link rel="stylesheet" type="text/css" href="/css/global.css" />

(Note that you use a path relative to the root, so that it doesn't matter what URL was used to request the page.)

In the style sheet you would use the image like this:

#Logo { background: url(../images/logo.gif); }

Set up a structure something like:

/index.html
/img
    /image1.png
    /image2.png
/css
    /styles.css

Move all your CSS rules into the external styles.css stylesheet.

Now, within the CSS, your image references are relative to the location of the stylesheet - so you can use relative URLs like background-image: url(../img/image1.png);

Finally, make sure that in your HTML code, you use an absolute URL to link your stylesheet - like:

<link type="text/css" rel="stylesheet" href="/css/styles.css" />

Using relative URLs within your CSS means you're free to move your stylesheets and background images into different folders - or even to a different domain or server - whilst the absolute URL /css/styles.css in your HTML LINK tag won't be affected by mod_rewrite or anything else that affects your pages' apparent location on your server.

If you can, you should anchor your URL's so they become root relative:

For instance, change:

background-image: url(images/image.png);

To this:

background-image: url(/images/image.png);

Secondly, even if your CSS was setup as a pure relative path, it is relative to the CSS file not the page (unless you are embedding the CSS in the page).

The CSS is in a file and looks for example like this:

.ui-widget-content { background: black url(images/content.png) repeat-x; }

Structure:

domain.com/folderone/
domain.com/folderone/style/
domain.com/folderone/style/css/
domain.com/folderone/style/css/general.css

And a look on Firebug says that it's trying to load from:

http://domain.com/style/css/images/content.png