How to have background image in symfony assets?

Question

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.

score 6 · Answer 1 · answered Jan 17 '15 at 12:50

6

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>

answered Jan 17 '15 at 12:50

marcoshoya

214
1
5

Thanks for trying to help. please read "UPDATE" section in my question I edited above. – user4271704 Jan 17 '15 at 16:56
Sorry, please ignore UPDATE section and instead see [this question](http://stackoverflow.com/questions/28002381/how-to-move-symfony-web-app-php-to-root-app-php) – user4271704 Jan 17 '15 at 17:51
Do you have any idea how that htaccess should be? – user4271704 Jan 17 '15 at 19:07
I have no ideia. Sorry – marcoshoya Jan 19 '15 at 17:25
sorry, setting "../../images/top_bg.jpg" instead of "../images/top_bg.jpg" did not help. Please [see this](http://stackoverflow.com/questions/28032757/how-to-have-css-background-image-with-symfony-app-php-in-root-folder). – user4271704 Jan 19 '15 at 20:12
../../images/top_bg.jpg still did not work. Please see http://stackoverflow.com/questions/28032757/how-to-have-css-background-image-with-symfony-app-php-in-root-folder any help please? – user4271704 Jan 20 '15 at 07:54
paste your config.yml file here, please – marcoshoya Jan 20 '15 at 20:36

NTsola · Answer 2 · 2016-04-28T18:05:34.897

5

To make it work in twig try this

<div class="container" style="background-image:url('{{ asset('bundles/appbundle/images/top_bg.jpg') }}')"> ,

of course presuming that you have installed the bundle's web assets under a public web directory.

edited Apr 28 '16 at 18:05

answered Apr 18 '16 at 20:46

NTsola

61
1
5

score 0 · Answer 3 · answered Jul 07 '20 at 12:16

I solve this issue with the following steps:

First let Webpack do his work.
Let's copy all the file to the public/build directory (images and css files)
Next step is to include the css style via twig/smarty in your template
Immediately after the "link" tag, you should open a "script" tag and overwrite all affected styles. In Twig you can work with the "asset" function to load the corresponding URLs from the manifest

i.e:

<link type="text/css" rel="stylesheet" rev="stylesheet" href="{{ asset('/build/css/header.css') }}">
<style >
    .header { background-image: url('{{ asset('build/img/logo.png') }}') !important; }
</style>

Your background image is correct changed. The output looks like:

<link type="text/css" rel="stylesheet" rev="stylesheet" href="/build/css/header.5c7b2ca6.css">
<style >
    .header { background-image: url('/build/img/logo.bb1272f9.png') !important; }
</style>

This is not the best way to work with Webpack. However, this is an interim solution to refactor outdated code. The next step should be to create entrypoints and build the style using SCSS. Webpack then takes care of the correct use of assets in the styles.

How to have background image in symfony assets?

3 Answers3

Linked