.css files not loading images in Symfony2

Question

i'm fairly new to Symfony2 and trying to create my first php application.

All was working fine until i got to of setting up background image in my .css file. For some reason all changes (background color, fonts etc.) to .css file are reflected in my new.html.twig file accept images.

I am under impression that i did everything like it should be but maybe in the wrong sequence (below in done in the new bundle):

1. Resources/public/css created style.css file (this is what it looks like):

   .test{
        font-size: 25px;
        background-color: yellow;
   }
   
   .topstyles {
       width: 135px;
       height: 113px;
       background-color: blue;
   }
   
   .topstyleg {
       background-image: url(images/ice.png);
   }
   
   .col2{
       position: absolute;
       left: 300px;
       top: 100px;
   }
   
   .form-control {
       margin-bottom: 3px;
   }
   

2. Placed image in my bundle folder under Resources/public/images

3. Added link to .css file in my new.html.twig

   {% block stylesheets %}
      {% stylesheets '@TestTestBundle/Resources/public/css/*' filter='cssrewrite' %}
      <link rel="stylesheet" href="{{ asset_url }}" type="text/css"/>
      {% endstylesheets %}
   {% endblock %}
   

4. Ran php app/console assets:install web --symlink. As my system does not support symlinks, that just duplicated files of my bundle Resources folder in web/bundles folder including .css and images.

5. Every time doing changes to my any of the files in any of the folders in my bundle/Resources folder i was re-running assets:install so all changes are reflected in web/bundles/testtestbundle.

6. Use php app/console assetic:dump to dump, which creates separate css folder in root/web directory with, where .css file look as following

   .test{
        font-size: 25px;
        background-color: yellow;
   }
   
   .topstyles {
       width: 135px;
       height: 113px;
       background-color: blue;
   }
   
   .topstyleg {
       background-image: url(../../Resources/public/css/images/ice.png);
   }
   
   .col2{
       position: absolute;
       left: 300px;
       top: 100px;
   }
   
   .form-control {
       margin-bottom: 3px;   
   }
   

7. Clear cache with php app/console cache:clear --env=prod --no-debug

And for some reason all changes are reflected accept images.

The resources i have tried already are:

• http://www.craftitonline.com/2011/06/symfony2-beautify-with-assetic-and-a-template-part-ii/
• Symfony2 - Assetic - load images in CSS
• symfony2 - the assetic assetic:dump command doesn't create stylesheets correctly

As well as some other resources, but it does not seem to work no matter what i do.

There is possibility i have not installed some of the require bundles but: - i cannot figure out which one - if something is missing, i assume i would not have any formatting uploaded from .css file, and i only cannot get images to work, rest is loading just fine.

Any assistance will be highly appreciated as i have spend quite a few hours trying to figure this our.

Answer 1

Because you have you css files in Resource/public/css and you image files in Resource/public/images, you should define the urls in CSS files like this:

.topstyleg {
    background-image: url(../images/ice.png);
}

The cssrewrite filter requires that you use relative paths (From the css file point of view)

Answer 2

After a bit of trial and error and thanks to Dric512 i was able to resolve this issue.

Is seems like i have used incorrect link (at least it is incorrect in my case) in my new.html.twig

{% block stylesheets %}
   {% stylesheets 'bundles/testtestbundle/css/*' filter='cssrewrite' %}
   <link rel="stylesheet" href="{{ asset_url }}" type="text/css"/>
   {% endstylesheets %}
{% endblock %}

Also, as my images were in the different folder then my .css files i has to refer to them like this:

.test{
    font-size: 25px;
    background-color: yellow;
}
.topstyles {
    width: 135px;
    height: 113px;
    background-color: blue;
}

.topstyleg {
    background-image: url(../images/ice.png);
}

.col2{
    position: absolute;
    left: 300px;
    top: 100px;

}
.form-control {
    margin-bottom: 3px;   
}

all this is done in by src/Test/TestBundle/Resources/css/style.css file i have created.

When this is done, i have created assets using: php app/console assets:install web -- symlink

When that is done i ran php app/console assetic:dump and php app/console cache:clear just in case.

Works like charms.

Answer 3

I know this answer doesn't answer the question, but I suggest to use DataURIs for css images, they work without any source file, you don't need to hold the original images. And it reduces HTTP requests.

Or, don't use Assetic bundle, use the standard assets