Specifying a background image for a given page in the frontmatter

support
,
1

Hello there, I’m quite new to hugo and also quite clueless about html, css etc. So good prerequisits you see :wink:
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, with a line that should look something like:
background = ‘BG.png’

or:
background = /images/BG.png
(images being a subfolder of static)

Although I am not quite sure about what it exactly would look like so Hugo could interpret it properly

Is something like this possible at all?
And if so, what would have to be done and which files would have to be edited?
I remember something about being able to change what can go into the front matter, perhaps through an archetype.
I sadly really am quite a beginner still, and don’t understand how it all comes together quite yet, but hope that an answer to this question would help me get closer to an understanding of it all, plus obviously solve the problem itself.
If there’s something I forgot to mention, let me know.
Thank you so much already, and I appreciate all the input I can get :slight_smile:

2

mmh, not really sure, what to tell you here.

The first thing would be to read Requesting Help, take some thoughts on it and follow.

Next I consider reading the first three sections of Getting started | Hugo and Content management | Hugo is something mandatory to understand how Hugo is organized. In your case Front matter | Hugo and more about templating and css handling will be valuable.

With Hugo a site is organized in site → sections → (subsections/bundles) → page, so there’s only one site (except for multilanguage setups) . It’s unclear for me if you talking about one image for each language, for each section, for every page.

Also consider:

  • is the image optional, mandatory, shared by multiple pages (maybe per section).
  • What happens if there’s no image (a default one, or no image then)
  • maybe one image per section (and all it’s pages)…

Yes, it’s possible and it may be done can be achieved with different setups,

  • image by filename
  • field in front matter (maybe initialized by archetype at creation time maybe in config/data file)
  • image stored in static/bundle/assets
  • CSS with inline styles, different stylesheets, processed at build time, …

How and where to integrate is a design decision and depends on your site sources and templates.

The archetype is used at source file creation time, you may change front matter values in the *.mdfiles any time later.

All that said

It lead’s back to Requesting Help from above.

Seems you already have something - guess you use a Theme (which?) – show it, so one can suggest something for your setup.

to give you something

Here’s a very basic variant using inline style for your baseof.html to place last in the HTML <head> section:

:warning: This is a very bare - just to show - version - it will only work with a rather simple site setup…

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

use in font matter and – for the default value – in site config

+++
[params]
    bg = 'path to image'
+++

images are placed in /static folder.

3

In addition to the valuable advice @irkode gave you: You can, of course, put the name of a file you want to use as a background image in the frontmatter of your .md file. But accessing it from CSS is non-trivial. It’s not something I’d try to do as a Hugo newbie: You’d “somehow” have to copy the path to the image into the CSS. Or use an inline style in your Hugo template that renders the page(s).

In your CSS, use
body { background-image: "url/to/image.file"} rather than a contrived thing like body::after.

I wouldn’t use background images on body at all – too much distraction. But that’s a question of personal preferences.

I doubt that. Seriously. Putting a background image on a page is only a tiny little detail, and it’s part of the overall styling of the page(s). Where to put that information, how to modify style sheets, that all depends on the structure of your site and on the theme you’re using. There are no simple answers like “change this, modify that, and you’re all set”.

In general, I’d recommend to start simple with a basic Hugo project that you then subsequently style according to your needs/whims. Preferably with only a basic theme like the one created by hugo new theme mytheme. It’s (in my opinion) a lot easier to start from scratch than to find your way around the (often badly documented) choices of someone else.

4

Wow that’s some long replies and a lot of input, thank you so much!
Let me try to get to everything that was brought up here.

I will get to reading the docs when I can. it’s just that there’s so much technical stuff, that you kinda need to understand it already to even understand what it’s referring to. I’m not exactly a code guy, but wanted to give it a try anyways.

I see that the answer is not as straightforward as I was hoping it might be, but I quite expected that already.
The solution which you gave me does indeed work, and is exactly what I was looking for.
The website for now isn’t supposed to be complex for now anyways, so this totally works! :slight_smile:

And in reply to what chrillek wrote:
Yeah, I initially just copied something from a guide, but quickly figured that the body::after is not exactly the straightforward way to do things - it just worked for the moment.

While it may not be the biggest deal, it certainly motivated me.

I actually did start pretty much from scratch, minus a few copies and small snippets here and there from themes and guides to see if and what it would do, to maybe then be able to modify and create such things on my own.

Thank you again for the replies, this works for now, and I do see that there’s still a lot to learn from here. I hope that some time in the future I can come back to this post and be able to smile at it :wink:

1 Like
5

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