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

Answer 2

There was few issues with ccsrewrite:

the CssRewrite filter does not work when using the @MyBundle syntax in AsseticBundle to reference the assets. This is a known limitation.

Here is php version for cssrewrite:

<?php      foreach ($view['assetic']->stylesheets(array(         'bundles/test/css/foundation/foundation.css',         'bundles/test/css/foundation/app.css',         'bundles/test/css/themes/adapzonManager.css'), array('cssrewrite')) as $url): ?>     <link rel="stylesheet" href="<?php echo $view->escape($url) ?>" /> <?php endforeach; ?>