I have a sveltekit application with different routes. Each route has a custom background image. My problem is, that while routing in the Navbar between the subpages the right background picture is displayed, but it doesn’t fill the whole background of the body. There is a small padding where the background picture of the first loaded page is visible. When I reload the subpage, the padding is gone and everything works perfectly fine, until I navigate to another sub page. I think it has something to do with, which body is loaded first and there is a problem with “overwriting” the loaded body background image. Shouldn’t it be standard to have different background images for routes? Does anyone know the problem and could help me out?
Below is an example how. I set my background image in my routes. Each Route looks linke this.
My Routes:
<script>
(...My Script)
</script>
<body>
(...My Route Content...)
</body>
<style>
body{
background-image: url('my/path/to/image');
background-size: cover;
background-repeat:repeat-y;
}
(...More Styles...)
</style>