How to set a background image url in CSS when my CI applications is into a subfolder?

[eluser]Optimus Prime[/eluser]
Hi, I hope that you can help me with this topic.

How to set a background image url in CSS when my CI applications is into a subfolder?

I explain my question:

(1) I am using two subfolder in my localhost. Because I'm developing two web application in the same PC. My directory tree is like this:

/ <--- www root
+--/site1
| +--/ci_folder
| | +--/application
| | +-- .... (all CI folders)....
| | ...
| +--/media
| +--/css
| +--/images
|
+--/site2
+--/ci_folder
| +--/application
| +-- .... (all CI folders)....
| ...
+--/media
+--/css
+--/images

(2) Well, the problem is the use of url inside of css file. I want to use "background-image: url(...)" propierty. It worked if I set: background-image: url(/site1/media/images/some_image.jpg)...

But it doesn't load when I set like this: url(/media/images/some_image.jpg). I tried to put "../media..." or "../../media..." but didn't work.

I think that is logical because the file does not exist in (root)/media/images directory, but I will copy all directory in another server (per example the site1 directory) and it'll convert in a root directory and I want to avoid to rewrite all url in the css files when I test the applications in another server.

So, there is a way to solve this problem?

.. Or maybe it is not possible to avoid to manually rewrite the url's in the css files, but I hope to confirm it or find a solution with your help for working with multiple sites (stored in differents subfolders) and CSS files.

[eluser]John_Betong[/eluser]
[quote author="Optimus Prime" date="1190890903"]Hi, I hope that you can help me with this topic.

How to set a background image url in CSS when my CI applications is into a subfolder?

I explain my question:

(1) I am using two subfolder in my localhost. Because I'm developing two web application in the same PC. My directory tree is like this:

/ <--- www root
+--/site1
| +--/ci_folder
| | +--/application
| | +-- .... (all CI folders)....
| | ...
| +--/media
| +--/css
| +--/images
|
+--/site2
+--/ci_folder
| +--/application
| +-- .... (all CI folders)....
| ...
+--/media
+--/css
+--/images

(2) Well, the problem is the use of url inside of css file. I want to use "background-image: url(...)" propierty. It worked if I set: background-image: url(/site1/media/images/some_image.jpg)...

But it doesn't load when I set like this: url(/media/images/some_image.jpg). I tried to put "../media..." or "../../media..." but didn't work.

I think that is logical because the file does not exist in (root)/media/images directory, but I will copy all directory in another server (per example the site1 directory) and it'll convert in a root directory and I want to avoid to rewrite all url in the css files when I test the applications in another server.

So, there is a way to solve this problem?

.. Or maybe it is not possible to avoid to manually rewrite the url's in the css files, but I hope to confirm it or find a solution with your help for working with multiple sites (stored in differents subfolders) and CSS files.[/quote]

Hi Optimus Prime,

You could try:

Code:

1. introduce a "/common" folder, copy the common image and use
   "background-image: url(/common/some_image.jpg)"

2. in your site2 CSS file:
    background-image: url(/site1/media/images/some_image.jpg)

&nbsp;
I use the first method and it works fine.
&nbsp;
Also check to ensure that the path and image file are correctly case-sensitised if that is the correct wording?

Cheers,

John_Betong
&nbsp;
&nbsp;

[eluser]Michael Wales[/eluser]
I tend to develop more than one site at a time and it does get a bit confusing and messy in there at times - but I insist on referencing everything from root. My folder structure is as follows:

Code:

root
  - css
    - site_1
    - site_2
  - images
    - site_1
    - site_2
  - js
    - site_1
    - site_2
  - site_1
  - site_2

One of the repercussions of this is that when you do actually go live on your domain, your site will be referencing /css/site_1/ when site_1 will probably be the only directory within the /css/ directory (no reason to include site_2's files on site_1's server, right?).

It's not a big deal and won't hinder you in the development process - it just feels weird to have a single sub-directory... I think I get that feeling from my college experience (your outline can not have a single statement as a sub-topic, you can't split something into one part).

[eluser]John_Betong[/eluser]
Hi Walesmd,
&nbsp;
>>> develop more than one site at a time and it does get a bit confusing
>>> and messy in there at times

Slightly off topic but you mentioned about more than one site and I thought this post may be helpful:
&nbsp;
http://ellislab.com/forums/viewthread/59270/
&nbsp;
Cheers,

John_Betong
&nbsp;

// edit: incorrect spelling of name
&nbsp;
&nbsp;

[eluser]Optimus Prime[/eluser]
Thaks, your ideas and experience helped me a lot!

John: I pick your first option, to have a common folder in the root folder. But your modification for a Menu driven multiple CodeIgniter applications are great. I will post my comments for it.

Michael: Your folder structure is very useful. I think I will use your idea with some modifications for a commons template engine of all my site. In this way, the subfolder may be a name of a theme template and it will make more sense to have one more directory level.