Dynamically load images from css using htaccess in subfolder

Question

I am creating multiple website in my local webserver. I have trouble when loading images form a css files dynamically when using subfolders.

This is my structure:

Root folder
    site1
        index.php (loads templates using Smarty)
        .htaccess
        public_files
            css
            js
            img
            templates

This is how my .htaccess looks like:

RewriteEngine On
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteRule ^([a-zA-Z]+)$             index.php?uri=$1 [L]
RewriteRule ^(css|js|img)/(.*)$       public_files/$1/$2 [L]

Loading my css does work:

<link href="css/style.css" rel="stylesheet" />

But within this css I cannot load images

background-image: url("img/background.jpg");

I think this is because this line is called from the css folder. But when I use /img/... it will look in the root, which is also not the right place because I'm within a subfolder.

anubhava · Accepted Answer · 2013-12-09 09:05:00Z

1

Keep your site1/.htaccess like this:

RewriteEngine On
RewriteBase /site1/

RewriteCond %{SCRIPT_FILENAME} !-f
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteRule ^([a-zA-Z]+)$ index.php?uri=$1 [L]

RewriteCond %{SCRIPT_FILENAME} !-f    
RewriteCond %{REQUEST_URI} !/public_files/ [NC]
RewriteRule (?:^|/)css/(img/.+)$ public_files/$1 [L,NC]

RewriteCond %{SCRIPT_FILENAME} !-f
RewriteCond %{REQUEST_URI} !/public_files/ [NC]
RewriteRule (?:^|/)((?:css|js|img)/.+)$ public_files/$1 [L,NC]

edited Dec 9, 2013 at 9:05

answered Dec 3, 2013 at 15:43

anubhava

790k67 gold badges603 silver badges671 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ron van der Heijden Over a year ago

This way even my css isn't loaded.

anubhava Over a year ago

Can you open your page in Firebug and check the Net tab and then tell me what URL you get for css that generates 404 for you?

Ron van der Heijden Over a year ago

Now it also tries to open http://localhost/site1/css/img/background.jpg and it got a Internal Server Error

Ron van der Heijden Over a year ago

It is looking at http://localhost/site1/css/img/background.jpg so from the css folder.

Ron van der Heijden Over a year ago

Also I got the message: Not found: /site1/public_files/css/img/background.jpg

|

Phil Perry · Accepted Answer · 2013-12-03 16:00:21Z

0

url("img/background.jpg") says that img/ is relative to the directory holding the css (css/, I presume). So it could be looking in /css/img/. Try ../img/ instead.

answered Dec 3, 2013 at 16:00

Phil Perry

2,15014 silver badges18 bronze badges

1 Comment

Ron van der Heijden Over a year ago

Yes, that is the reason i use the .htaccess file. I don't want to change every path when I move my website to the root folder.

Collectives™ on Stack Overflow

Dynamically load images from css using htaccess in subfolder

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related