mod_rewrite not working well with trailing slash & css breaks apart - php

Question

I have just one root directory with index.php in it along with two folder img and css.
I refer to files in this folder like:
src="img/path.png" i.e relative to the root directory.
The other day I had some mod_rewrite question & this is what someone gave me, which seems to wrok fine except for trailing slashes and css/img breaking apart
RewriteRule ^$ index.php?page=1 [L]
RewriteRule ^([0-9]+)/?$ index.php?page=$1 [L]
RewriteRule ^([A-Za-z]+)/?$ index.php?category=$1&page=1 [L]
RewriteRule ^([A-Za-z]+)/([0-9]+)/?$ index.php?category=$1&page=$2 [L]
This is what is bothering me:
Using Rule1:
www.example.com changes to www.example.com/index.php?page=1 which is great
Also www.example.com/ some how changes to www.example.com which is again great
Using Rule2:
www.example.com/2 changes to www.example.com/index.php?page=2 like what I would want
But using www.example.com/2/ (TRAILING SLASH) also retrieves page=2 but somehow the img and css breaks apart.
I am guessing the problem is with url being treated as directory structure and then it cant find img and css folder there.
Using Rule 3:
www.example.com/Football changes to www.example.com/index.php?category=Football&page=1 again like what I would want
But www.example.com/Football/ (TRAILING SLASH) suffers from the same problem with img and css breaking apart
Using Rule 4:
www.www.example.com/Football/2 even without the trailing slash breaksdown on css and img however the page can retrieve tha page and category correctly.
How do I correct this problem without having to use absolute paths in my html.
Please advise on the trailing slash problem as well.

Answer 1

Can you not reference your images/css using relative but starting with a /?
/images/blah.jpg
/css/style.css

Answer 2

You could add a rule like:
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond $1 !^(index\.php|images|robots\.txt|favicon.ico)
# Other rules here
The idea is to avoid the rewrite case for an existing file or directory.

Answer 3

With a trailing slash, the path will be interpreted as a directory. Wherever you include images, css files and such you have to change the paths. Say you have images in an img folder, you probably use it in css like:
background: url(img/image.png)...
Change that to :
background: url(/img/image.png) ...
Same goes for everywhere you have images referenced or other paths. Using a path that starts with "/" means that you are searching from the root directory. The rules you're using are the rules that I'm ussually using and didn't have any problems with them. Actually, I find it easier to build my paths with a starting "/".
Just as a last example, if you have: mysite.com/home and you have <img src="img/image.png" /> the image will be searched in mysite.com/img/image.png which is probably what you want.
But if you have mysite.com/home/ and <img src="img/image.png" /> the image must reside in mysite.com/home/img/image.png which is not what you want, thus using <img src="/img/image.png" /> would be the solution for you.