How to have background image in symfony assets?

symfony assets assetic
user4271704 picture user4271704 · Jan 16, 2015 · Viewed 12k times · Source

with symphony framework I did dump assets assets:install. css file is hard copied to /web/bundles/appbundle/css/style.css I guess for background image in css I should have a relative path to reach outside of /web/ folder like this?

background-image: url(../../../../bundles/appbundle/images/top_bg.jpg);

but it doesn't work yet, I have filter='cssrewrite' in css tag too. probably I have to add that I am only editing the css file located at the path above after assets install, I did not edit the one in /Acme/Bundle/Resources/public/css any more. Then I did run assets:dump, now in /web/ folder there are two folders for images and css, I looked at new css and see the path became like this:

background-image: url(../../bundles/applicationadmin/images/top_bg.jpg);

But still all images are broken. I search stackoverflow and found this question, but still have problem. what else should I do?

please advice.

Answer

marcoshoya picture marcoshoya · Jan 17, 2015

First of all, make sure that your css and images are inside correct folder.

src/AppBundle/Resources/public/css/style.css
src/AppBundle/Resources/public/images/top_bg.jpg

After you run assets assets:install, check if there is a folder on your web directory. It have to be a identical copy from Resources/public.

web/bundles/app/css/style.css
web/bundles/app/images/top_bg.jpg

And your style.css file should look like this:

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

However, if you are configuring the css directly on twig template, the url is different:

<style>
  div { background-image: url("/bundles/app/images/top_bg.jpg"); }
</style>

Related questions

symfony2 - the assetic assetic:dump command doesn't create stylesheets correctly

For some reason I can't load the css files. Here is the structure of the bundle that I use BD WebsiteBundle public css And here is how I try to load the css files {% stylesheets 'bundles/bdwebsite/css/*' filter=…

Read More
Symfony2: How to share js libs and css between bundles

I have different Bundles: MainBundle (Homepage), SecurityBundle (Login, Registration), MessageBundle (Message System), ShopBundle. I also follow the three stage layout schema (::base.html.twig, AcmeMainBundle::layout.html.twig, AcmeMainBundle:Default:index.html.twig). But I have problems sharing common js …

Read More
Symfony2 - Assetic - load images in CSS

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 …

Read More