Trouble with CSS image paths inside of default AppBundle

Question

I'm using the Symfony 2.3.25 and am very new to the framework I have Symfony to the dev environment through my apache config. The issue I'm having is getting images referenced in CSS to load correctly. I'm using the default AppBundle that comes with Symfony.

My file structure is as follows:

symfony_root/
  app/
    Resources/
      public/
        css/
          style.scss
        js/
          script.js
        images/
          masthead-4.jpg

I store my source files in symfony_root/app/Resources/public and then have Assetic compile them and output to the symfony_root/web/. This happens in my Assetic config which is as follows:

symfony_root/app/config/config.yml

assetic:
    debug:          "%kernel.debug%"
    use_controller: false
    bundles:        [ ]
    #java: /usr/bin/java
    read_from:      %kernel.root_dir%/Resources/public/
    write_to:       %kernel.root_dir%/../web/
    filters:
        cssrewrite: ~
        sass: 
            apply_to: "\.scss$"
            bin: path_to_sass_which_works
        #closure:
        #    jar: "%kernel.root_dir%/Resources/java/compiler.jar"
        #yui_css:
        #    jar: "%kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar"
    assets:
        bootstrap_js:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap-sass/assets/javascripts/bootstrap.js
        bootstrap_css:
            inputs:
                - %kernel.root_dir%/../vendor/twbs/bootstrap-sass/assets/stylesheets/_bootstrap.scss
            filters: [cssrewrite]

Now in my layout.twig file, which as I understand it takes the css files defined here, runs them through filters as defined here or in config.yml and outputs the files to the web directory. I have the following:

symfony_root/app/Resources/views/layout.html.twig

{% stylesheets output='css/application.css'
  'css/style.css.scss'
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}

Finally, in my style.css.scss file, I have the following problematic line:

.is--site_landing {
  background: transparent image-url('../images/masthead-4.jpg') top center no-repeat;
  background-size: cover;
}

The image-url in the css is not being found and displayed in the browser. I have tried changing the url in the css to many different paths.

/images/masthead-4.jpg

/images/masthead-4.jpg

../images/masthead-4.jpg

../images/masthead-4.jpg

masthead-4.jpg

enter image description here

I've also tried adding the cssrewrite filter when the stylesheets are included in the layout.html.twig file, but it changes the css to an incorrect path, such as:

 {% stylesheets filter='cssrewrite' output='css/application.css'
      'css/style.css.scss'
    %}

enter image description here

Finally, if I put the masthead-4.jpg image in web/images/masthead-4.jpg, I can navigate to the image through the URL and it works correctly. Also, any images included with the normal image tag referenced by Symfony works correctly. It's only images included with CSS that are not referenced correctly.

This works:

      {% image 'images/masthead-4.jpg' %}
        <img class="img-circle hidden-xs" alt="Pass Rates" width="80" src="{{ asset_url }}" alt="Example" />
      {% endimage %}

Thank you and any help would be appreciated.

Tomasz Madeyski Tomasz Madeyski · Accepted Answer · 2015-02-13T20:01:34

What you are missing is cssrewrite filter. Also, path to your css files look little odd. Try something like (in your layout.html.twig)

{% stylesheets output='bundles/app/css/application.css'
  'bundles/app/css/style.css.scss'
  filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}

Check this for more detailed info

Trouble with CSS image paths inside of default AppBundle

1 Answers