Skip to Content
DocsEssenceSite WideBackground

Background

Essence supports two site-wide background styles: a static Image or an animated Shader (WebGL). The background sits behind all content and cards.

Change background style

  1. Go to Settings → Site → Design & branding
  2. Click Customize → Theme → Site wide
  3. Change the Background style setting:
    • Shader (default) — animated WebGL preset. See Shader Presets
    • Image — fixed cover image behind the site

Background image

When Background style is set to Image, upload a file in the Background image field. The image covers the viewport and stays fixed while you scroll.

For best results, use a high-resolution image (at least 1920px wide). Dark images work best with Essence’s default typography and card styles.

Shader background

When Background style is set to Shader, the theme renders an animated WebGL canvas. Configure the preset, colors, and noise in Shader Presets.

If WebGL is unavailable in the visitor’s browser, the shader may not render. Switch to Image background style as a fallback, or see Browser Compatibility.

FooterShader Presets