Image Path for Background Image

support
1

Hi guys,

I’m super new to developing in general and I’m using Hugo to build my first website. I have a quick question that might be dumb, but I can’t seem to find the answer.

I’m using this
background-image: url(…/images/placeholder.png’);

And my file path for the image is:

site/src/images/placeholder.png

It’s not picking up the image? I’m wondering if there is a URL problem? I’m really sorry if this is a noob question, but I’ve been searching and I can’t understand what I’m doing wrong with this image path - I’ve seen this post: https://discuss.gohugo.io/t/image-path/1721 but can’t seem to grab an answer from it.

Would love some help!!

2

@ChristopherHo your static content would go into the static folder on the site.

Example:

  • static/
  • images/
    placeholder.png

`background-image: url("/images/placeholder.png");

When you run the Hugo command it will place your static content respective to the root of the build location.

1 Like
3

Talves - thanks so much. This worked like a charm.

To anyone else who has this problem and is using sass or scss make sure the Static folder is in your scss folder and not your css folder when you create it!

4

More specifically make sure it is in a relative path to the root of the static folder which is the root location of your published site.

5

Since static is copied over as-is, you could set this to the root, but I wouldn’t recommend it:

<div style="background-image:url(/images/placeholder.jpg')"></div>

You’re better off future-proofing it a bit and making it relative using a func in your templates…

<div style="background-image:url('{{"/images/placeholder.jpg" | relURL }}')"></div>

Further, I’m guessing you are going to define a variable in a page to pass in a different image for placeholder, yeah? You can use the default function to set a default/placeholder value…

HTH

4 Likes
6

rdwatters - thanks so much, this is super helpful!

So I can just use default before I set a placeholder value - amazing.

Thanks guys! So helpful!

1 Like
7

Just a quick FYI, this also works with the placeholders you define in your front matter, so for dynamic header / featured images:

<div class="featured-image" style="background-image: url('{{ .Params.featured_image }}')"></div>

and the frontmatter:

+++
featured_image = "/images/cover-contract.jpg"
+++
1 Like
8

You don’t need to be sorry. I want to thank you instead, because I had had the same problem and your question helped me a lot. #we_are_all_newbies_in_this_life. :wink: