Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 3 down vote favorite

I have a website with a file structure a bit like this....

/webroot/folder1/main            - php, css etc files in here
/webroot/folder1/data/images     - images in here

I.e. www.mydomain.com/index.php will point to the files in /webroot/folder1/main/

And, for example, in .css there might be a reference to an image like this...

background: url(../data/images/sprite1.png);

It is not picking up the images. I guess this is because the ../ wants to go up a level but the website thinks its at the root already so it cant go up?

Is this normal, should I have expected this to happen? Or there a way round it?

(I know I could move images as a sub-directrory of main but I have lots of google map image tiles etc in here and this would make backup difficult and I'd need to change all my tile generation scripts etc.)

I thought of pointing the domain at /webroot/folder1/ and doing an .htaccess reWrite to silently go to /webroot/folder1/main but I couldnt get it to work.

share|improve this question

3 Answers

up vote 1 down vote accepted

There is no way to reference those image files through HTML or CSS. Your "web root" is /webroot/folder1/main/ - that folder on the server corresponds to the root of your domain. So a file at /webroot/folder1/main/page.html on the server is accessed on http://example.com/page.html.

Everything below the main folder is publicly accessible using your domain, while everything above that on the server is not.

The most appropriate solution for you is to move the images folder under the main folder, i.e. so it's at /webroot/folder1/main/images/. Then the images can be referenced from the stylesheet with url("/images/file.jpg") (note the leading slash on the URL).

There are reasons you may wish to keep files outside the web root, such as security. Moving your application files there prevents them from ever being accessible publicly in case of a server misconfiguration (quite rare).

You may also want to restrict users to viewing certain files - server side code like PHP should still be able to access the files. You would put the files outside the web root and have a public URL (e.g. a PHP script) that checks permissions and serves the file if allowed.

share|improve this answer
up vote 1 down vote

It is not picking up the images. I guess this is because the ../ wants to go up a level but the website thinks its at the root already so it cant go up?

Correct. Relative URLs are resolved by the client, not the server.

If it was possible to pass ../ to the server and escape the document root then any file on the server would be available to any HTTP client. This would be a serious security problem.

Is this normal, should I have expected this to happen?

Yes

Or there a way round it?

Expose the images on a sensible URL. You could use (to take Apache HTTP as an example) Alias to expose a directory outside the server root to a URL, or use a symbolic link, or you could just move the files so they are under the server root.

Change the URLs you are passing to the client to point to the new URLs you've set up for the images.

share|improve this answer
Thanks for the explanation for the first half but dont know what you mean by: Change the URLs you are passing to the client to ... What do you mean by passing to client? Do you mean jsut change the paths in the .css fiels etc? I cant really move the files. Are you saying ALIAS is a solution avoiding doing this? – spiderplant0 May 13 at 22:17
Yes. Well, not just, you have to do what the previous paragraph says first. – Quentin May 13 at 22:18
I think I'm confused cos I think you are describing several solutions? Could you elaborate on the ALIAS one please? Might make it cleared to me what you mean – spiderplant0 May 13 at 22:27
You pass a URL to the client with background: url(/where/you/put/the/images/sprite1.png); – Quentin May 14 at 6:08
I listed three ways to expose the images on a URL. They are separated with the word "or"` – Quentin May 14 at 6:09
show 1 more comment
up vote 0 down vote

Assuming that I'm correct then your structure is like so:

/webroot/folder1/main/index.php
/webroot/folder1/main/style.css
/webroot/folder1/main/data/images/sprite1.png

If this is the case then style is also included within the root so using ../ would actually take you to /folder1/data/images/sprite1.png rather than /webroot/folder1/main/data/images/sprite1.png also because its in the root you do not need / at the start and should only be included when going up a level. So your CSS should work with the following:

background: url('data/images/sprite1.png');
share|improve this answer
No you got the location if images incorrect. Images are in here: /webroot/folder1/data/images – spiderplant0 May 13 at 22:15

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.