Hugo Pipes CSS Background Image

support
1

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:

Project

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

2

You can try resources.ExecuteAsTemplate on your main.css: https://gohugo.io/hugo-pipes/resource-from-template/

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

3

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?

4

You could move your image to static…

4 Likes
5

To expound:

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

However, from the docs: Hugo Pipes | Hugo

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: ExecuteAsTemplate | Hugo

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.

2 Likes
6

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.

7

Hi guys, i have this situation

  • image inside /themes/demo/static/img folder
  • css file inside assets/css/style.css

But accessing background-image: url(/staticimg/bg-background.png); it give me 404. Any help pls? Thanks

8

For:

  • CSS, you can try setting CSS variables either in resources.ExecuteAsTemplate, or inline in your base template (which I would do), and use those in your CSS; for url I suspect you need to use absolute URLs (e.g. $resource.Permalink)
  • For CSS in JS, pass these values as params in js.Build.
9

The above does not look correct, try url(/img/bg-background.png);

10

@bep You mentioned setting the CSS variables inline in the base template and use those in your CSS. Can you expand on you answer a little?

I have a basic class in the .scss file like so.

body {
	background: url('../../../assets/images/background.jpg') no-repeat 0 0;
}

I have my .scss files currently running through Hugo Pipes like so.

{{- $options := (dict "transpiler" "dartsass" "targetPath" "style.css" "outputStyle" "compressed" "enableSourceMap" false) -}}

{{- $styles := resources.Get "scss/styles.scss" | resources.ToCSS $options | fingerprint "sha512" -}}

<link rel="preload" href="{{ $styles.RelPermalink }}" as="style" />
<link href="{{ $styles.RelPermalink }}" rel="stylesheet" integrity="{{ $styles.Data.integrity }}" />

It’s unclear how to update my background path in the .scss file and update my current code above to include the resources.ExecuteAsTemplate. Thanks for you help.

11

You no longer need to use resources.ExecuteAsTemplate to pass values from your templates into Sass files. See:

https://discourse.gohugo.io/t/initialize-sass-variables-from-hugo-templates/42053

Clone the example at the bottom of the post. Among other things, this example sets the body background image to the .RelPermalink of an image that has been processed by Hugo. In the example, see:
layouts/partials/get-scss-vars.html.

12

Thanks @jmooring I’ll take a look.