Fingerprinting resources used in CSS

Suppose I have a background-image: url('my-background.png'); rule in my CSS. I haven’t been able to make Hugo fingerprint that resource. Is there any way of doing so, or should I just include it in the static folder and leave it as is (no fingerprinting)?


Hi @alberto and welcome to the community!

Hugo does not manipulate the url part within CSS (as far as I know)—even if you use fingerprint and postCSS for CSS processing.

If you put your image under /assets/ it will not get published.

So your suggestion /static/[images/] is the best option.

P.S.: You can use params in CSS like this:

.test {
  color: {{ .Site.Params.themeSettings.defaultColor }};

I have never tested something like this with images.

You need to somehow make it so Hugo treats your CSS as a template (resources.ExecuteAsTemplate?), then you can do:

background-image: url('{{ (resources.Get "my-background.png" | fingerprint ).RelPermalink }}')

Etc. The above assumes a file in assets/my-background.png.


Very cool, indeed!

Thanks to both of you! The solution given by @bep works like a charm. Thank you!! :smiley: