Images in CSS Asset in Symfony2 - css

Question

I have the following problem:
I included the CSS File from fancybox into my base.html.twig file:
{% block head_style %}
{% stylesheets
'../vendor/twbs/bootstrap/dist/css/bootstrap.min.css' filter='cssrewrite'
'#Bundle/Resources/public/css/site.css' filter='cssrewrite'
'#Bundle/Resources/public/css/jquery.fancybox.css' filter='cssrewrite'
%}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock head_style %}
My directory is the following:
The Problem I'm fancing now is that fancybox can't find the fancybox_sprite.png,fancybox_overlay.png and fancybox_loading.gif.
Here's one of the paths in the jquery.fancybox.css:
#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url('../images/fancybox_sprite.png');
}
Here's the path that the browser is looking for:
http://project/Resources/public/images/fancybox_sprite.png
What I also found out is that the /images directory won't be loaded into the /web dir, but in the /bundles dir, though I used assets:install, assets:install --symlink and assetic:dump.
Why can't the system read the images or why aren't the images loaded into the /web dir?
I found a few Questions on SO about this, but neither of them helped me.

Answer 1

Do not use the #Bundle notation with cssrewrite, it is known to fail -- read the second notice here.
You should instead write the relative path to your css files from the web folder. Once you have exported your assets using bin/console assetic:install, your new base.html.twig should read:
{% block head_style %}
{% stylesheets
'../vendor/twbs/bootstrap/dist/css/bootstrap.min.css' filter='cssrewrite'
'bundles/something_online/css/site.css' filter='cssrewrite'
'bundles/something_online/css/jquery.fancybox.css' filter='cssrewrite'
%}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock head_style %}