Specify a background image in the frontmatter in lightbi theme

[mrbalsi]

Hello again.
I am tinkering around with the lightbi-theme (Lightbi)
It uses preview cards featuring images, which are specified in the frontmatter of the respective file in the content folder. What I am looking to do is to also be able to specify an image(different from the preview card image) which then is used as the background image for that specific post/site.
Maybe someone has experience with the theme. It’s quite organized, but quite hard to get into initially.
Thank you very much

[irkode]

just found that one

Specifying a background image for a given page in the frontmatter

Hello there, I’m quite new to hugo and also quite clueless about html, css etc. So good prerequisits you see Anyways, I managed to get an image working as a background, by adding a body:after tag in the style.css with the line background-image: url(“BG.png”); amongst some others about where and how to place it etc. However, I want to be able to have specific background images depending on what site I am on. Ideally it would be specified in each sites (i.e. .md file’s) front matter, w…

anything special with your new request?

[mrbalsi]

Yes… I tried your solution and it doesn’t work anymore.
Plus I feel the theme is so advanced and organized, it invites a proper implementation.
Also this time it’s for a specific theme to begin with, not just any/a blank project
Best regards!

[mrbalsi]

Okay, after some tinkering and testing around the solution does work again.
There’s probably a better place for

{{ with $.Param "bg" }}
  <style>
    body { background-image: url("{{ . | absURL }}"); }
  </style>
{{ end }}

though, so if someone knows where to put that in the theme, let me know.
Perhaps I’ll figure it out myself as well, and give an update in that case.
Thanks again

Edit: I remembered the real issue. The theme inverts the colors of the images in dark mode.
However, it doesn’t do so with the other ones. I think it excludes those in the folder img. The theme uses yaml instead of toml however, and also relative and not absolute links.
I don’t know how to make it use files from the assets/img folder (which, as I understand, would work with this)
Any hint?
Thanks

[chrillek]

@mrbalsi

if someone knows where to put that in the theme, let me know.

Possibly the theme’s author. Or it’s documentation.

[irkode]

@chrillek

Or it’s documentation.

Or it’s layout structure

The theme has support to customize

• SCSS by adding a custom.scss
• add custom stuff to
  • begin of header section
  • at the end of the footer section ← might be the place to add your bg image

The themes dark mode relies on filters to inverting the colors for dark mode, which seems to also affect the background image (otherwise you will need two background images a light and dark to get a dark mode feeling)

relevant code are the filters in main.scss dark theme settings line 1187+