# Background cover image using CSS

**URL:** <https://discourse.gohugo.io/t/background-cover-image-using-css/45450>\
**Category:** support\
**Created:** [July 25, 2023, 2:43pm UTC](https://discourse.gohugo.io/t/background-cover-image-using-css/45450 "2023-07-25T14:43:21Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Z3R0](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/z3r0/32/19767_2.png) [@Z3R0](https://discourse.gohugo.io/u/Z3R0)\
**Post date:** [July 25, 2023, 2:43pm UTC](https://discourse.gohugo.io/t/background-cover-image-using-css/45450/1 "2023-07-25T14:43:21Z")

</div>

Hi, This is my first try with Hugo, I am trying to convert an HTML Theme to Hugo for the startup company. I did face some issues but found fixes for those either on YouTube, some random blog, or here but I cannot find a fix for there’s another issue as no one has even replied on that one. Hopefully, this won’t see the same faith any way I want to use the cover.jpg as background in blog–\> single.html

That section uses `background-image:` in CSS to define a static image as background but I want to use the cover image of the posts. so far I tired

```auto
background: rgba(0, 0, 0, 0) url('{{"/img/cover.jpg" | relURL }}') no-repeat fixed center center / cover;

```

```auto
background: rgba(0, 0, 0, 0) url("/img/cover.jpg") no-repeat fixed center center / cover;

```

```auto
background: rgba(0, 0, 0, 0) url("{{ .RelPermalink }}/img/cover.jpg") no-repeat fixed center center / cover;

```

```auto
background: rgba(0, 0, 0, 0) url("{{ .Permalink }}/img/cover.jpg") no-repeat fixed center center / cover;

```

```auto
+++++++
in index.md -----> cover: /img/cover.jpg
+++++++

background: rgba(0, 0, 0, 0) url('{{ .Params.cover }}') no-repeat fixed center center / cover;

```

but these don’t seem to work, this `{{ .RelPermalink }}/img/cover.jpg` works in HTML but not in CSS so I am not sure what to do.

---

<div class="post-metadata">

**Author:** ![AlanBreck](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/alanbreck/32/11694_2.png) [@AlanBreck](https://discourse.gohugo.io/u/AlanBreck)\
**Post date:** [July 25, 2023, 3:22pm UTC](https://discourse.gohugo.io/t/background-cover-image-using-css/45450/2 "2023-07-25T15:22:49Z")

</div>

In order to do something like this, you’d have to process your CSS as a template using [`ExecuteAstemplate`](https://gohugo.io/hugo-pipes/resource-from-template/). In my experience, this has created some slowness, though.

I would recommend using a CSS variable as the URL and then setting the variable on the relevant HTML element.

E.g.

**Stylesheet**

```css
.some-selector {
  --bg-cover: "/path/to/some/default/img.jpg";
  background: rgba(0, 0, 0, 0) url(var(--bg-cover)) no-repeat fixed center center / cover;
}

```

**baseof.html**

```html
...
<body {{ with .Params.cover }}style="--bg-cover: '{{ . }}'"{{ end }}>
...
</body>
...

```

**index.md**

```markdown
+++
cover = "/img/cover.jpg"
+++

```

---

<div class="post-metadata">

**Author:** ![Arif](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/arif/32/20931_2.png) [@Arif](https://discourse.gohugo.io/u/Arif)\
**Post date:** [July 25, 2023, 3:32pm UTC](https://discourse.gohugo.io/t/background-cover-image-using-css/45450/3 "2023-07-25T15:32:40Z")

</div>

Try this in your CSS file.

```auto
{{- $cover := .Resources.GetMatch "cover.*"}}
.test { background: rgba(0, 0, 0, 0) url('{{ $cover.RelPermalink }}') no-repeat fixed center center / cover; }

```

Then in your `head.html` file (assuming your cover images have the same base file name).

```auto
{{- $cover := resources.Get "css/test.css" | resources.ExecuteAsTemplate "css/test.css" . | minify | fingerprint }}
<link rel="stylesheet" href="{{ $cover.RelPermalink }}" {{- if hugo.IsProduction }} integrity="{{ $cover.Data.Integrity }}" {{- end }}>
``
```

---

<div class="post-metadata">

**Author:** ![Z3R0](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/z3r0/32/19767_2.png) [@Z3R0](https://discourse.gohugo.io/u/Z3R0)\
**Post date:** [July 25, 2023, 3:35pm UTC](https://discourse.gohugo.io/t/background-cover-image-using-css/45450/4 "2023-07-25T15:35:47Z")

</div>

```auto
.some-selector {
  --bg-cover: "/path/to/some/default/img.jpg";
  background: rgba(0, 0, 0, 0) url(var(--bg-cover)) no-repeat fixed center center / cover;
}

```

Not sure how it will be dynamic? this looks like using a normal background image but with extra steps. I want the background-image to change for every post.

---

<div class="post-metadata">

**Author:** ![Z3R0](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/z3r0/32/19767_2.png) [@Z3R0](https://discourse.gohugo.io/u/Z3R0)\
**Post date:** [July 25, 2023, 3:43pm UTC](https://discourse.gohugo.io/t/background-cover-image-using-css/45450/5 "2023-07-25T15:43:21Z")

</div>

```auto
    {{- $cover := resources.Get "css/style.css" | resources.ExecuteAsTemplate "css/style.css" . | minify | fingerprint }}
    <link rel="stylesheet" href="{{ $cover.RelPermalink }}" {{- if hugo.IsProduction }}
        integrity="{{ $cover.Data.Integrity }}" {{- end }}>

```

pasting this in the head.html gives this error

```auto
Error: error building site: render: failed to render pages: render of "home" failed: "/mnt/myData/work/mw/hugoFiles/PortV1/themes/AroxMarketing/layouts/_default/baseof.html:3:3": execute of template failed: template: home/list.html:3:3: executing "home/list.html" at <partial "common/head.html" .>: error calling partial: "/mnt/myData/work/mw/hugoFiles/PortV1/themes/AroxMarketing/layouts/partials/common/head.html:23:58": execute of template failed: template: partials/common/head.html:23:58: executing "partials/common/head.html" at <resources.ExecuteAsTemplate>: error calling ExecuteAsTemplate: type <nil> not supported in Resource transformations

```

---

<div class="post-metadata">

**Author:** ![AlanBreck](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/alanbreck/32/11694_2.png) [@AlanBreck](https://discourse.gohugo.io/u/AlanBreck)\
**Post date:** [July 25, 2023, 3:50pm UTC](https://discourse.gohugo.io/t/background-cover-image-using-css/45450/6 "2023-07-25T15:50:10Z")

</div>

> Not sure how it will be dynamic?

It’s dynamic due to the use of CSS variables (or custom properties). If you’re not familiar with them yet, I’d highly recommend reading up on them. Extremely powerful tool.

> **[Using CSS custom properties (variables) - CSS: Cascading Style Sheets | MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)**
>
> Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by CSS authors that represent specific values to be reused throughout a document. They are set using the @property at-rule or by custom property...

While seeming like extra steps, it’s actually fewer steps for Hugo since it doesn’t need to treat your stylesheet as a template. You also don’t have to muck up your stylesheets with Hugo specific template syntax.

---

<div class="post-metadata">

**Author:** ![Z3R0](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/z3r0/32/19767_2.png) [@Z3R0](https://discourse.gohugo.io/u/Z3R0)\
**Post date:** [July 25, 2023, 4:03pm UTC](https://discourse.gohugo.io/t/background-cover-image-using-css/45450/7 "2023-07-25T16:03:42Z")

</div>

> [@](#):
>
> It’s dynamic due to the use of CSS variables (or custom properties). If you’re not familiar with them yet, I’d highly recommend reading up on them. Extremely powerful tool.

I don’t understand if I am going to define a path `/img/cover.jpg` in the CSS variable wouldn’t it look in `static/img/` instead of looking into post/blog —\> postfolder —\> img ??

and btw it’s not working the URL shows these weird numbers

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/3X/2/4/24d1eb0b28d6e065a31cc08531007e08f5514188.png)

```auto
.blogarea {
    --bg-cover: "/img/cover.jpg";
    background: rgba(0, 0, 0, 0) url(var(--bg-cover)) no-repeat fixed center center / cover;
}

```

```auto
<section {{ with .Params.cover }}style="--bg-cover: '{{ . }}'"{{ end }} class="section blogarea overlay-dark d-flex align-items-center">

....

</section>

```

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [July 25, 2023, 4:22pm UTC](https://discourse.gohugo.io/t/background-cover-image-using-css/45450/8 "2023-07-25T16:22:17Z")

</div>

Does your content structure look like this?

```plaintext
content/
├── blog/
│ ├── blog-1/
│ │ ├── cover.jpg
│ │ └── index.md
│ └── blog-2/
│ ├── cover.jpg
│ └── index.md
└── _index.md

```

Or something different?

---

<div class="post-metadata">

**Author:** ![Z3R0](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/z3r0/32/19767_2.png) [@Z3R0](https://discourse.gohugo.io/u/Z3R0)\
**Post date:** [July 25, 2023, 4:23pm UTC](https://discourse.gohugo.io/t/background-cover-image-using-css/45450/9 "2023-07-25T16:23:47Z")

</div>

> [@jmooring](#):
>
> Does your content structure look like this?

No it is like that

```auto
content/
├── blog/
│ ├── 2023/
│ │ ├── Jul/
│ │ ├──21/
│ │ ├──img/cover.jpg
│ │ ├─ index.md
│ └── index.md
└── _index.md

```

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [July 25, 2023, 5:26pm UTC](https://discourse.gohugo.io/t/background-cover-image-using-css/45450/10 "2023-07-25T17:26:04Z")

</div>

Try this:

```plaintext
git clone --single-branch -b hugo-forum-topic-45450 https://github.com/jmooring/hugo-testing hugo-forum-topic-45450
cd hugo-forum-topic-45450
hugo server

```

> **layouts/\_default/baseof.html**
>
> ```plaintext
> {{ if and (eq .Type "blog") (eq .Kind "page") }}
> {{ partial "set-background-image.html" (dict "page" . "selector" "main" "image" "img/cover.jpg") }}
> {{ end }}
> 
> ```

  

> **layouts/partials/set-background-image.html**
>
> ```plaintext
> {{- /* Get page resource, fall back to global resource. */}}
> {{- $r := "" }}
> {{- with .page.Resources.Get .image }}
> {{- $r = . }}
> {{- else }}
> {{- with resources.Get .image }}
> {{- $r = . }}
> {{- end }}
> {{- end }}
> 
> {{- /* Create and publish style sheet. */}}
> {{- if $r }}
> {{- $css := "{{ .selector }} {background: rgba(0, 0, 0, 0) url('{{ .url }}') no-repeat fixed center center / cover;}" }}
> {{- with resources.FromString "set-background-image.css" $css }}
> {{- $targetPath := urls.JoinPath $.page.RelPermalink (printf "background-image-%d.css" ($.selector | crypto.FNV32a)) }}
> {{- $ctx := dict "selector" $.selector "url" $r.RelPermalink }}
> {{- with . | resources.ExecuteAsTemplate $targetPath $ctx }}
> {{- with . | minify | fingerprint }}
> <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
> {{- end }}
> {{- end }}
> {{- end }}
> {{- end }}
> 
> ```

  

> **published site structure**
>
> ```plaintext
> public/
> ├── blog/
> │ ├── blog-1/
> │ │ ├── img/
> │ │ │ └── cover.jpg
> │ │ ├── background-image-3935363592.min.5eb4bdb930cd537a4fef2d3d831ed0016bac9f41b6c1fc147386eaf37a662346.css
> │ │ └── index.html
> │ ├── blog-2/
> │ │ ├── img/
> │ │ │ └── cover.jpg
> │ │ ├── background-image-3935363592.min.82d8f2b42cc0d13da33ceceaf9b1cede142c21aec3810fbe95b30ac69ae4bcfe.css
> │ │ └── index.html
> │ ├── blog-3/
> │ │ ├── background-image-3935363592.min.03a47ecc7957c81fc7529b42e171f791265f1fa13bdac553a85c8ee0c4ad17da.css
> │ │ └── index.html
> │ └── index.html
> ├── css/
> │ └── style.min.bff66cbcab35b14fd5b053ae084e97c3539211ddd188eb9eae3c4146778680a3.css
> ├── img/
> │ └── cover.jpg
> ├── favicon.ico
> └── index.html
> 
> ```

  

This approach creates a small, unique, additional style sheet for each “dynamic” background image that you add to a page. And you can use the partial multiple times on the same page with different selectors and image paths.

A web server’s [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) (CSP) may block inline styles—this approach is safer.

---

<div class="post-metadata">

**Author:** ![Z3R0](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/z3r0/32/19767_2.png) [@Z3R0](https://discourse.gohugo.io/u/Z3R0)\
**Post date:** [July 25, 2023, 5:57pm UTC](https://discourse.gohugo.io/t/background-cover-image-using-css/45450/11 "2023-07-25T17:57:08Z")

</div>

> [@jmooring](#):
>
> layouts/\_default/baseof.html

I had to do this because in the CSS it was showing main for some reason. I did a few change and after breaking the site a few this one worked

`{{ partial "common/backgroundcover.html" (dict "page" . "selector" ".blogarea" "image" "img/cover.jpg") }}`

Thank You So Much for helping me out.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [July 25, 2023, 5:57pm UTC](https://discourse.gohugo.io/t/background-cover-image-using-css/45450/12 "2023-07-25T17:57:48Z")

</div>

I’m refactoring this a bit. Hold off.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [July 25, 2023, 6:08pm UTC](https://discourse.gohugo.io/t/background-cover-image-using-css/45450/13 "2023-07-25T18:08:37Z")

</div>

I’ve edited my initial response, and pushed a change to the repository. There was a problem with the style sheet name if the selector was a class or id (element selectors worked fine).

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [July 25, 2023, 6:54pm UTC](https://discourse.gohugo.io/t/background-cover-image-using-css/45450/14 "2023-07-25T18:54:10Z")

</div>

One more time… now it handles complex selectors properly (e.g., `div#foo > .bar.baz`).

I’ve updated my initial response, and pushed a change to the repository.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [July 27, 2023, 6:54pm UTC](https://discourse.gohugo.io/t/background-cover-image-using-css/45450/15 "2023-07-27T18:54:37Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.