Cakephp images from css using themes

Question

im using themes in an app im doing, and need a global css/img/js folder

i have tried using app/webroot as this folder, but cant get any css from a theme to show the images.

I have a setup like :: /app/views/themed/my_theme/webroot/css/file.css

With some css that looks like:

...
body{
     background-image: url('../img/file.jpg');
}
...

if i have the image in /app/views/themed/my_theme/webroot/img/file.jpg everything works 100% but when i put the image in /app/webroot/img/file.jpg it will not show. i have tried all sorts of combinations for the

i have also tried using a plugin dir like app/plugins/my_plugin/webroot/img/file.jpg but the various paths ive tried will not show the image either.

any ideas how i can get the image to show? i dont mind if its for webroot/ or in plugins/xyz/, just as long as i can use the same image in many different themes with out having to duplicate the images

when the image is in /webroot/img i can use the full path like url(http://locahost/my_app/img/file.jpg) and it works.

things that dont work

url("img/file.jpg")

url("/img/file.jpg")

url("../img/file.jpg")

url("/../img/file.jpg")

url("../../img/file.jpg")

thanks.

Answer 1

In your CSS file

body{ background-image: url('/img/file.jpg'); }

This will use the root area to find the image in /app/webroot/img/file.jpg

Answer 2

CSS has urls for images relative to the path it is placed in.

CSS files from my_theme are linked like site.com/theme/my_theme/css/style.css in the browser. So if you want to use an image from app/webroot/img in your theme's CSS, use url(../../../img/image.png)

Answer 3

I have not tried that but the cookbook says:

If you want to keep your theme assets inside app/webroot it is recommended that you rename app/webroot/themed to app/webroot/theme.