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); }
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).
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.
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:
