Symfony2 image asset in CSS background

Question

I have a problem with an image asset in symfony2, which I defined as a background in the css file. But, The image is always not found by the browser.

Here's my stylesheets block from the base layout :

 {% stylesheets '@FsHomeBundle/Resources/public/css/common.css'
                       '@FsHomeBundle/Resources/public/css/main.css' filter="cssrewrite"  %}
                <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
        {% endstylesheets %}

And here's my css:

.header{
    background-image:url('../images/hdbg.png');
}

The image is located in src/Fs/HomeBundle/Resources/public/images/hdbg.png

Note: I tested also without cssrewrite filter , and it didn't work either, I tested changing the url as well.

Did anyone encounter this problem before?

Edit Note also that I'm working in /app_dev.php , and I do a assets:install and assetic:dump and also cache:clear every time I make a test.

can you confirm the image is installed in web and is accessible in the browser? — Mark Fox
– Mark Fox, Commented Dec 29, 2013 at 18:11
I checked these two URLS : app_dev.php/bundles/fshome/images/hdbg.png and app_dev.php/web/bundles/fshome/images/hdbg.png... All of theme show a ResourceNotFoundException... But the image is located in /web/bundles/fshome/images/hdbg.png — SmootQ
– SmootQ, Commented Dec 29, 2013 at 18:16

Mark Fox · Accepted Answer · 2013-12-29 18:46:42Z

2

After installing your assets (I'd recommend using symlink):

$ php app/console assets:install --symlink

You should see a message like:

…
Installing assets for Fs\HomeBundle into web/bundles/fshome
…

Take note of the path like web/bundles/fshome path and use that instead of the @Bundle syntax:

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

Now cssrewrite should write the correct path.

This is a known limitation of cssrewrite, from github issues:

the cssrewrite filter does not work with the @bundle notation for stylesheets (because it will rewrite the path without taking into account that images will be moved from the bundle to the web folder

edited Dec 29, 2013 at 18:46

answered Dec 29, 2013 at 18:35

Mark Fox

8,9849 gold badges57 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

SmootQ Over a year ago

That's great , it works ...thank you so much +1 and Best answer, It took me sometime before I figure out that I need to execute the console as an administrator. The problem is solved.

SmootQ Over a year ago

I don't know what this symlink is for... I'm going to check it out in Docs and read about it.

Mark Fox Over a year ago

you should read up about it but in short --symlink will save you trips to the command line

Vytautas Gimbutas · Accepted Answer · 2013-12-29 18:01:35Z

2

Try running "app/console assets:install web".

answered Dec 29, 2013 at 18:01

Vytautas Gimbutas

1991 silver badge5 bronze badges

1 Comment

SmootQ Over a year ago

I see that the generated css file used is (css/56c0165_main_2.css), and the image is located in (web/bundles/fshome/images/hdbg.png)... one would expect that background-image:url('../images/hdbg.png') doesn't work. And yes, I tried "app/console assets:install web" and it didn't work

Collectives™ on Stack Overflow

Symfony2 image asset in CSS background

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related