Background image scaling issue

support
1

Hi! I’m having a problem that the background image on my Hugo page zooms in like Hubble and creates nasty artifacts.

I’m using the ‘Dimension’ theme (Hugo Theme Dimension | Hugo Themes) and would like to know an idiomatic way to fit the image to the screen.

I have tried hacking the ´mainsite/themes/dimension/static/assets/css/main.css´ file but can’t see any change in the rendered page and reckon, that it isn’t the opmimal solution here.

Currently the page looks like this:

image
image574×779 109 KB

2

I’ll be going to google “idiomatic” in a bit, but here are my thoughts:

  • restart the hugo server - does it still not show?
  • “hacking” is bad. Make a copy of that file and put it in /assets/css/main.css (NOT in themes, right in your website repository). This will override the theme file and you can change away.
  • not sure if your css change does not do what you want, if it’s that, then try background-size: cover (see link)
3

Idiomatic programming, as described by a Stack Overflow user: “An idiomatic way of writing some code is when you write it in a very specific way because of language-specific idioms that other languages don’t have.”

What I mean by idiomatic is that what is the way most “Hugoistic” way to tackle the issue.

As for your bullet points:

  • Restarting the server does not work.
  • I did copy the main.css from theme’s static assets to siteroot/assets/css/main.css. However ‘localhost:1313/assets/css/main.css’ remains unchanged.
  • The setting is currently set to ‘cover’. However I’m trying different options such as ‘contain’ to see if there’s any difference. Thus far the changes are not visible on the served page.

Thanks for the answer anyways!

4

When the server starts, a list shows up of what files are monitored. Is the siteroot/assets/css/main.css file/directory part of this list? It seems that your file might not be loaded. contain would lead to visible changes.

5

“Watching for changes in /mnt/c/Users/user/sites/siteroot/{archetypes,assets,content,data,layouts,static,themes}”

Thus, assets seems to be on the watchlist.

I tried building the site using plain ‘hugo’ command but the siteroot/public/assets/css/main.css remains unchanged.

6

Not public, siteroot/assets/css/main.css is the path.

7

I suspect the transform and transitions properties on the element with the backgrounnd image is the problem. This is not a Hugo issue.

#bg::after {
    transform: scale(1.125);
    transition: transform 0.325s ease-in-out, filter 0.325s ease-in-out;
}