Symfony2 - Assetic - load images in CSS

Asked 2011-08-12T18:25:16.270

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.

Edit Report

2 Answers

I solved the problem by following the instructions on this site: http://www.craftitonline.com/2011/06/symfony2-beautify-with-assetic-and-a-template-part-ii/

The actual problem is that you reference your bundle resources absolute, but must reference them relative.

{% stylesheets filter='cssrewrite' output='css/*.css'
    'bundles/blistercarerisikobewertung/css/*'  %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
{% endstylesheets %}

Clear your cache and install your assets again

answered 2011-09-13T18:49:35.347

I have developed a small bundle with a extra filter to solve this issue. You can find it on github: https://github.com/fkrauthan/FkrCssURLRewriteBundle.git

With this bundle the @Notation for assetic works if you have relativ paths in your css file.

answered 2012-07-16T18:26:43.230

Symfony2 - Assetic - load images in CSS

2 Answers

Your Answer