CODEWITHSUNDEEP
symfonytwig
user4271704
user4271704

Reputation: 763

how to have image in css file that is loaded in a twig template?

in twig template I use this for image:

{% image '@AcmeFooBundle/Resources/public/images/example.jpg' %}
    <img src="{{ asset_url }}" alt="Example" />
{% endimage %}

and this for css:

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

But in my css I have some classes with image:

background-image: url(../images/left_menu_bg.jpg);

Of course the image is broken, Is there any way to solve this? or I need to move the background image to twig template any way? if yes how can I have a background imgae for div? 

<div class="blah" background="image.jpg">

I don't think full path like:

background-image: url(Acme/AcmeDemo/images/left_menu_bg.jpg);

will help because of query parameters in URI?

Upvotes: 1

Views: 1087

Answers (1)

Christophe Willemsen
Christophe Willemsen

Reputation: 20185

You should use the cssrewrite filter inside your stylesheets tag :

From the symfony doc : http://symfony.com/doc/current/cookbook/assetic/asset_management.html#cookbook-assetic-including-css

But because Assetic changes the paths to your assets, this will break any background images (or other paths) that uses relative paths, unless you use the cssrewrite filter.

{% stylesheets 'bundles/acme_foo/css/*' filter='cssrewrite' %}
    <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

Upvotes: 2

Related Questions