Symfony2 - Assetic - load images in CSS

Question

I have a CoreBundle that contains main css files and images. Now I have a problem when I load an image from css; the image isn't shown.

 background-image:url(../images/file.png)

(with a full path it works)

I installed the assets using the command: assets:install web and i can see the image and css files under web/bundles/cmtcore/(css|images).

Here's the file structure inside the core bundle:

/CoreBundle
    /Resources
        /public
            /css
                /main.css
            /images
                /file.png

And here's how I load the css file into the template:

 {% stylesheets '@CmtCoreBundle/Resources/public/css/*' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
 {% endstylesheets %}

Thank you for your help in advance.

Answer 1

use the cssrewrite filter from Assetic bundle

In config.yml:

assetic:
    debug:          %kernel.debug%
    use_controller: false
    filters:
        cssrewrite: ~

And then call your stylesheets like this:

 {% stylesheets 'bundles/cmtcore/css/*' filter='cssrewrite' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
 {% endstylesheets %}

Oh and don't forget to use php app/console assetic:dump