.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):

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;
}

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

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 %}

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.
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.

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;   
}

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:

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.

score 0 · Answer 1 · answered Sep 14 '15 at 09:18

0

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)

answered Sep 14 '15 at 09:18

Dric512

3,525
1
20
27

Thanks Dric512. If i get it right i need to change this in Resources/public/css/style.css file then do php app/console install:assets and php app/console assetic:dump. Is that correct? – Sky21.86 Sep 14 '15 at 09:22
Yes the rest of the flow should not change. – Dric512 Sep 14 '15 at 09:31
Unfortunately not working for me, cleared browser cache as well just in case and still no go. is there something in config. files that i maybe need to consider? – Sky21.86 Sep 14 '15 at 09:38
Hmm, I don't see. When you run with app_dev.php, do you have more information about the error (Files not found), and the location where images are looked at ? You should get quite a lot information in the debug toolbar. – Dric512 Sep 14 '15 at 12:08
The thing is that i'm getting everything but images to be shown on the page - i do not get an error massage of anything like that. All runs well but images are not shown for some reason. Thanks – Sky21.86 Sep 14 '15 at 13:12
If you are using Firefox or Chrome, you can "Inspect element" and have access to the CSS definition of the element, the image link and so on. – Dric512 Sep 14 '15 at 13:50
Just looked into that now - i only see
Sample Text
– Sky21.86 Sep 14 '15 at 14:24
This is what I use: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector – Dric512 Sep 14 '15 at 14:51
Got some more detail on this (thanks to Dric512). It looks like the images are loading due to incorrect pass. This is what it is now http://localhost:8080/sites/testtwo/web/Resources/public/images/ice.png, and this is what it should be http://localhost:8080/sites/testtwo/web/bundles/testtestbundle/images/ice.png, – Sky21.86 Sep 14 '15 at 14:54

score 0 · Answer 2 · answered Sep 14 '15 at 16:13

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.

score -1 · Answer 3 · answered Sep 14 '15 at 09:05

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

.css files not loading images in Symfony2

3 Answers3