Navbar/banner image not rendering on netlify

Hi, I made a site using alpha church theme. On the local server the site renders without any problem. When I host the site on netlify the navbar and banner image does not render. According to the information I found on the forum I changed the base url to match the actual url from netlify, unfortunately no improvement. I suspect that the problem may be due to incorrect paths but I can’t solve the problem myself.

Github for my site: GitHub - DzikiJaszczomp/beta
Netlify: https://costatropical.netlify.app/

Here: https://github.com/DzikiJaszczomp/beta/blob/6135694a03f0c1c10c9f8e36ac2b52e8c34ca3d8/assets/scss/main.scss#L1378

instead of img/banner.jpg write /img/banner.jpg.

Everything in static will be ending up as / - path to whatever is in static, so always use a slash in the beginning of your paths, especially in CSS files.

in the folder static:

img/something.jpg

in the website:

/img/something.jpg

I’ll take that back. What you are doing there is “hey banner section, show my header image or show what I compile here” where the “here” is a simple / on your homepage, which is not an image. That overrides (my guess) the image that would work.

I would fix that this way:

your code:

background-image:		url({{ "img/overlay.png" | relURL }}), url({{ .Site.Params.Banner.image | relURL }});

fix:

{{ with site.Params.Banner.image }}
background-image: url({{ . | relURL }});
{{ else }}
background-image: url("/img/overlay.png");
{{ end }}

Basically, if you are not using any special set banner images (via the banner section in your params - if that sounds weird and you are not understanding what I am talking about then you are NOT using that), then just use this instead:

background-image: url("/img/overlay.png");

and put your header image into static/img/overlay.png.

Hey, thanks for your fast and quality response it worked. Yet i still got the problem with top site of the site not displaying. On the image that is now rendering should be navigation bar and some titles. And the map from open street map is also not displaying.

You are building your site on Netlify with v0.109.0 or earlier, which looks for config.toml instead of looking for either hugo.toml or config.toml.

Update your Netlify config to use v0.121.1 (latest), and either use config.toml or hugo.toml, but not both.

Hi, i changed netlify config version and deleted config.toml file but it didn’t helped. https://github.com/DzikiJaszczomp/beta/blob/main/netlify.toml

You changed it for one environment, not globally.

image

May you explain how to change it globally. Would really appriciate that.

A minimal netlify.toml…

[build.environment]
HUGO_VERSION = "0.121.1"

[build]
publish = "public"
command = "hugo --gc --minify"

Changing netlify.toml to either minimal or full config ends up with failing building site with error “Failed during stage “building site”: Build script returned non-zero exit code: 2”

Post the log.

11:41:38 PM: Failed during stage “building site”: Build script returned non-zero exit code: 2
11:41:38 PM: Netlify Build
11:41:38 PM: ────────────────────────────────────────────────────────────────
11:41:38 PM: ​
11:41:38 PM: ❯ Version
11:41:38 PM: @netlify/build 29.31.0
11:41:38 PM: ​
11:41:38 PM: ❯ Flags
11:41:38 PM: baseRelDir: true
11:41:38 PM: buildId: 6574ed1360517d33a3c11fc6
11:41:38 PM: deployId: 6574ed1360517d33a3c11fc8
11:41:38 PM: ​
11:41:38 PM: ❯ Current directory
11:41:38 PM: /opt/build/repo
11:41:38 PM: ​
11:41:38 PM: ❯ Config file
11:41:38 PM: /opt/build/repo/netlify.toml
11:41:38 PM: ​
11:41:38 PM: ❯ Context
11:41:38 PM: production
11:41:38 PM: ​
11:41:38 PM: build.command from netlify.toml
11:41:38 PM: ────────────────────────────────────────────────────────────────
11:41:38 PM: ​
11:41:38 PM: $ hugo --gc --minify
11:41:38 PM: Total in 1 ms
11:41:38 PM: Error: failed to load modules: module “alpha-church” not found in “/opt/alpha-church”; either add it as a Hugo Module or store it in “/opt”.: module does not exist
11:41:38 PM: ​
11:41:38 PM: “build.command” failed
11:41:38 PM: ────────────────────────────────────────────────────────────────
11:41:38 PM: ​
11:41:38 PM: Error message
11:41:38 PM: Command failed with exit code 1: hugo --gc --minify (Search results for '"non-zero exit code: 1"' - Netlify Support Forums)
11:41:38 PM: ​
11:41:38 PM: Error location
11:41:38 PM: In build.command from netlify.toml:
11:41:38 PM: hugo --gc --minify
11:41:38 PM: ​
11:41:38 PM: Resolved config
11:41:38 PM: build:
11:41:38 PM: command: hugo --gc --minify
11:41:38 PM: commandOrigin: config
11:41:38 PM: environment:
11:41:38 PM: - HUGO_VERSION
11:41:38 PM: publish: /opt/build/repo/public
11:41:38 PM: publishOrigin: config
11:41:38 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
11:41:38 PM: Failing build: Failed to build site
11:41:39 PM: Finished processing build request in 14.024s

And there you go.

It looks like you cloned a theme, and are modifying it, instead of adding it to a site as a theme. Not sure what you’re doing…

Your site config…

theme = "alpha-church"
themesDir = "../.."

…doesn’t make sense for a production site.

https://github.com/funkydan2/alpha-church/blob/master/SETUP.md