Symfony 3 set background image using CSS

Question

The answer provided by "Symfony 2 set background image using CSS" doesn't work in Symfony 3 any more. So I ask the very same question for the next version:

I want to put a background image from CSS, how can I do that?

What I tried:

/* src/SiteBundle/Resources/public/css/style.css */
#element {
  background: url('../images/image.jpg');
}

With an image located at src/SiteBundle/Resources/public/images/image.jpg.

Assets are correctly installed with console asset:install --symlink, all green to go.

Assetic is manually installed with composer.

CSS is loaded with:

<!-- app/Resources/views/base.html.twig -->
{% stylesheets '@SiteBundle/Resources/public/css/*.css' filter='cssrewrite' %}
  <link rel="stylesheet" href="{{ asset_url }}" type="text/css">
{% endstylesheets %}

What I got:

When I look at my browser inspector, it tells me that the css property is

background: url('../../Resources/public/images/image.jpg')

which is obviously not working.

What I tried to fix it:

I tried changing the CSS background property to url('images/image.jpg'), knowing it wouldn't work but to figure out how it handles the links.

The browser inspector told me the link was now url('../../Resources/public/css/images/image.jpg'), telling me there is no way I can change the ../../Resources/public/ part.

How am I supposed to to it correctly?

Bonus question you should ask yourself before answering: will your answer work when I switch from dev to prod?

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

When using the cssrewrite filter, don't refer to your CSS files using the @AppBundle syntax. http://symfony.com/doc/current/cookbook/assetic/asset_management.html#fixing-css-paths-with-the-cssrewrite-filter

also:

Best Practice:

Store your assets in the web/ directory.

So you probably should use:

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

Is this work for both prod and dev? I really don't know since i'm using gulp to manage assets.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 1, 2016 at 16:13

malcolm

5,54229 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SteeveDroz Over a year ago

Thanks, I just found exactly the same answer, I tried it a few seconds before reading your answer and it works! ;-)

Collectives™ on Stack Overflow

Symfony 3 set background image using CSS

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related