# Problem with the toha theme and the picture background

**URL:** <https://discourse.gohugo.io/t/problem-with-the-toha-theme-and-the-picture-background/34503>\
**Category:** Using Themes\
**Created:** [August 29, 2021, 5:59pm UTC](https://discourse.gohugo.io/t/problem-with-the-toha-theme-and-the-picture-background/34503 "2021-08-29T17:59:53Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ezzmazz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ezzmazz/32/15098_2.png) [@Ezzmazz](https://discourse.gohugo.io/u/Ezzmazz)\
**Post date:** [August 29, 2021, 5:59pm UTC](https://discourse.gohugo.io/t/problem-with-the-toha-theme-and-the-picture-background/34503/1 "2021-08-29T17:59:53Z")

</div>

Hi,

I’ve a problem with the toha theme, when I try to change the background.

My config.toml :

```auto
baseURL = 'https://ezzmazz.gitlab.io/blog/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'toha'

[params]
gitRepo = "https://gitlab.com/Ezzmazz/toha.git"
background = "images/default-background.jpg"
enableBlogPost = true
enableTOC = true

[params.logo]
main = "images/main-logo.png"
inverted = "images/inverted-logo.png"
favicon = "images/favicon.png"

[params.newsletter]
enable = true

```

As you can see, I’ve a put the paramater `background = "images/default-background.jpg"` but the picture doesn’t appear as a background.

What I don’t understand is : for the parameters `main`, `inverted` and `favicon`, each pictures are displayed correctly so why the parameters `background` doesn’t works ?

I don’t really understand where is the problem…

And I’ve noted an other problem ( don’t know if this is the answer at my problem ). When I look the source code of my blog :

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/c/cb107cf5defeebffdfbff4c48e3bce620a942687.png)

I can see that the URL of the picture is : `https://ezzmazz.gitlab.io/blog/blog/images/default-background.jpg`

Why there is two `blog` in the URL ? If I delete one of them, the pictures appears correctly…

There is some one to help me ?

Thanks a lot !

My fork of the theme =\> [Ezzmazz toha theme fork](https://gitlab.com/Ezzmazz/toha)  
My blog repo =\> [My New Hugo Site](https://ezzmazz.gitlab.io/blog/)

---

<div class="post-metadata">

**Author:** ![divinerites](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/divinerites/32/12625_2.png) [@divinerites](https://discourse.gohugo.io/u/divinerites)\
**Post date:** [August 29, 2021, 7:17pm UTC](https://discourse.gohugo.io/t/problem-with-the-toha-theme-and-the-picture-background/34503/2 "2021-08-29T19:17:48Z")

</div>

The cause is in your `/partials/sections/home.html` :

`background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $tiny.RelPermalink }}')`

Not tested but I guess you can try something like : `background-image: url('{{ $tiny.Permalink }}')`

---

<div class="post-metadata">

**Author:** ![divinerites](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/divinerites/32/12625_2.png) [@divinerites](https://discourse.gohugo.io/u/divinerites)\
**Post date:** [August 29, 2021, 7:22pm UTC](https://discourse.gohugo.io/t/problem-with-the-toha-theme-and-the-picture-background/34503/3 "2021-08-29T19:22:04Z")

</div>

> [@Ezzmazz](#):
>
> Why there is two `blog` in the URL ?

One comes from your `BaseURL` and the other from your `RelPermalink`.  
Generally speaking you should avoid constructing URLs using `BaseURL`

---

<div class="post-metadata">

**Author:** ![Ezzmazz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ezzmazz/32/15098_2.png) [@Ezzmazz](https://discourse.gohugo.io/u/Ezzmazz)\
**Post date:** [August 31, 2021, 9:51am UTC](https://discourse.gohugo.io/t/problem-with-the-toha-theme-and-the-picture-background/34503/4 "2021-08-31T09:51:58Z")

</div>

Hi,

Thanks for the answer.

Indeed the problem is in the `background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}{{ $src.RelPermalink }}'); ` part.

I’ve tested to delete the `/blog` at the end of the **baseURL** in my **config.toml** but it seems that gitlab need it to generate correctly the theme. Withouh the `/blog`, my blog looks like a simply html page.

I’ve tested your proposition : ` background-image: url('{{ $tiny.Permalink }}')`, it didn’t work.

I’ve tested too this : `background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}/{{ $src }}')` and by adding the `/blog` at the end of my baseURL

The URL in my blog seems to be good :

```auto
#homePageBackgroundImageDivStyled {
    background-image: url('https://ezzmazz.gitlab.io/blog/images/default-background.jpg');
}

```

But still no picture as background 😕

My fork : [toha theme fork](https://gitlab.com/Ezzmazz/toha2)  
My repo blog : [blog](https://gitlab.com/Ezzmazz/blog/-/tree/master)

---

<div class="post-metadata">

**Author:** ![chrillek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/chrillek/32/19797_2.png) [@chrillek](https://discourse.gohugo.io/u/chrillek)\
**Post date:** [August 31, 2021, 10:23am UTC](https://discourse.gohugo.io/t/problem-with-the-toha-theme-and-the-picture-background/34503/5 "2021-08-31T10:23:05Z")

</div>

> [@Ezzmazz](#):
>
> But still no picture as background

Did you check that the browser downloads the image (Developer Tools/Network)? If it doesn’t, you’ll not see a background image, of course. And “the URL seems” good seems dubious if you don’t see the image.

---

<div class="post-metadata">

**Author:** ![Ezzmazz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ezzmazz/32/15098_2.png) [@Ezzmazz](https://discourse.gohugo.io/u/Ezzmazz)\
**Post date:** [August 31, 2021, 11:38am UTC](https://discourse.gohugo.io/t/problem-with-the-toha-theme-and-the-picture-background/34503/6 "2021-08-31T11:38:28Z")

</div>

The browser can’t find the picture.

It is strange.

At the beginning, the URL was `https://ezzmazz.gitlab.io/blog/blog/images/default-background.jpg`. When I deleted one of the `/blog`, the picture appeared correctly. To show, I’ve created an [other blog](https://tim59176.gitlab.io/blog/). I’ve no background.

With the developer tools, I can see that the URL to get the picture of the background is :

```auto
homePageBackgroundImageDivStyled {
    background-image: url('https://tim59176.gitlab.io/blog/blog/images/default-background.jpg');
}

```

If I delete one of the `/blog`, the picture appears.

Now, on my principal [blog](https://ezzmazz.gitlab.io/blog/), I found a way to have only one `/blog` in the URL, and the picture doesn’t appear…

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

So it means that the change that I’ve done on the _home.html_ doesn’t work. But I don’t know what to do to fix that.

---

<div class="post-metadata">

**Author:** ![chrillek](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/chrillek/32/19797_2.png) [@chrillek](https://discourse.gohugo.io/u/chrillek)\
**Post date:** [August 31, 2021, 11:53am UTC](https://discourse.gohugo.io/t/problem-with-the-toha-theme-and-the-picture-background/34503/7 "2021-08-31T11:53:50Z")

</div>

Well, the image is not where you think it is. I suggest that you read

> **[Static Files](https://gohugo.io/content-management/static-files/#readout)**
>
> Files that get served \*\*statically\*\* (as-is, no modification) on the site root.

and put the image in /static/images. You should then be able to reference it as “images/my\_image.png”

---

<div class="post-metadata">

**Author:** ![Ezzmazz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ezzmazz/32/15098_2.png) [@Ezzmazz](https://discourse.gohugo.io/u/Ezzmazz)\
**Post date:** [August 31, 2021, 12:25pm UTC](https://discourse.gohugo.io/t/problem-with-the-toha-theme-and-the-picture-background/34503/8 "2021-08-31T12:25:30Z")

</div>

Thanks for the help @chrillek !

I’ve mixed your soluce with mine.

I’ve created a `static/images/default-background.jpg` and I’ve keep this change that I did before :

```auto
background-image: url('{{ strings.TrimSuffix "/" site.BaseURL }}/{{ $src }}')

```

With the `/blog` at the end of my baseURL and now it works !

Thanks a lot !

---

<div class="post-metadata">

**Author:** ![divinerites](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/divinerites/32/12625_2.png) [@divinerites](https://discourse.gohugo.io/u/divinerites)\
**Post date:** [August 31, 2021, 8:19pm UTC](https://discourse.gohugo.io/t/problem-with-the-toha-theme-and-the-picture-background/34503/9 "2021-08-31T20:19:09Z")

</div>

> [@Ezzmazz](#):
>
> I’ve tested your proposition : ` background-image: url('{{ $tiny.Permalink }}')` , it didn’t work.

What is the value of `{{ $tiny.Permalink }}' ? Is it not `[https://ezzmazz.gitlab.io/blog/images/default-background.jpg`](https://ezzmazz.gitlab.io/blog/images/default-background.jpg%60) ??

---

<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:** [September 2, 2021, 8:19pm UTC](https://discourse.gohugo.io/t/problem-with-the-toha-theme-and-the-picture-background/34503/10 "2021-09-02T20:19:33Z")

</div>

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