diff options
Diffstat (limited to 'src/lib/BackgroundImage.svelte')
| -rw-r--r-- | src/lib/BackgroundImage.svelte | 14 |
1 files changed, 13 insertions, 1 deletions
diff --git a/src/lib/BackgroundImage.svelte b/src/lib/BackgroundImage.svelte index fd62170..0b2f043 100644 --- a/src/lib/BackgroundImage.svelte +++ b/src/lib/BackgroundImage.svelte @@ -1,8 +1,10 @@ <script lang="ts"> - import { onDestroy } from 'svelte' + import { onDestroy, onMount } from 'svelte' import { browser } from '$app/env' export let url: string + let styleHtml = `<style class="background-image-style">:root{--background:url(${url})}</style>` + let serverSideRenderedStyleShown = true function updateUrl() { if (!browser) return @@ -19,6 +21,10 @@ $: [url, updateUrl()] + onMount(() => { + serverSideRenderedStyleShown = false + }) + // get rid of the body style when we leave the page // not doing this will sometimes cause the background to stay onDestroy(() => { @@ -28,3 +34,9 @@ } }) </script> + +<svelte:head> + {#if serverSideRenderedStyleShown} + {@html styleHtml} + {/if} +</svelte:head> |