Hugo Pipes CSS Background Image

Hi all,

I’m new to Hugo but Ive searched the docs and this forum and cant seem to find an answer to my question.

I currently have the following directory structure:


  • assets
    – css
    ---- main.css
    – icons
    ---- icon.svg

In main.css I have the following:

.element {
    background-image: url(../icons/icon.svg);

But I’m getting a 404 on that image.

main.css is brought in with:

{{ $main := resources.Get "css/main.css" }}
<link rel="stylesheet" href="{{ $main.RelPermalink }}">

Is there any way I can reference this static asset (svg) within my css file without moving it to my static folder? This is a pre-packaged template that is imported as part of a build so I don’t want to have to mess with the directory structure.

Thanks in advance for your time.

You can try resources.ExecuteAsTemplate on your main.css:

and resources.Get the image there to get its .Permalink.

Thanks for your fast reply @pointyfar.

This seems like a very round about way to do a simple background image in a css (or .scss) file? Surely there’s a simpler way?

You could move your image to static


To expound:

You want to get a reference to an image under assets/.

However, from the docs:

Assets will only be published (to /public ) if .Permalink or .RelPermalink is used

So you need $youricon.Permalink somewhere.

This “somewhere” happens to be a css/scss file also under assets/.

However, from the docs:

In order to use Hugo Pipes function on an asset file containing Go Template magic the function resources.ExecuteAsTemplate must be used.

So. Simpler solution: move everything to static/, but you lose the nice features of asset resources.


That makes sense, thank you for your time.

This is probably something I can raise as an improvement with Hugo core. Its pretty strange having an asset pipeline that cant do simple relative references.