The Background Image Layout

The background layout places the article’s image behind the content, with configurable opacity and blur. The text remains fully readable while the image provides atmosphere.

Controlling the Effect

Two parameters fine-tune the background:

• opacity — how visible the image is (0.0 to 1.0). Lower values are more subtle.
• blur — how much the image is blurred. Higher values create a softer, less distracting backdrop.

This page uses opacity: 0.15 and blur: 8px for a gentle wash of colour behind the text.

Site-Wide Defaults

You can set default values in hugo.yaml:

params:
  bgImage:
    opacity: 0.2
    blur: 5px

Individual pages override these defaults via the image frontmatter block.

Dark Mode

Background-image pages use the theme’s dark canvas regardless of the visitor’s light or dark preference. A consistent canvas makes the configured image opacity, wash, and text contrast predictable.

Spoilers Over Images

Inline spoilers retain their concealed treatment over an image-backed canvas: the photograph was taken —·×–— ×–— ×–—·× —·× —·×–—·× —·×–—· after the storm had already passed .