background images in globalstyle | Astro Lounge | Page 1

golden spire Aug 30, 2023, 4:41 AM

#

I am using UnoCSS and was doing this in globalstyles.astro

  body {
    @apply bg-[url(../src/assets/images/light-sm.svg)] bg-cover bg-no-repeat absolute inset-0;
  }
  .dark body {
    @apply bg-[url(../src/assets/images/dark-sm.svg)];
  }

had to add /src to make it work in local dev. removed that and it still doesn't work in production. I have images:assets enabled. whats the correct way of using a background images like this?

neat karma Aug 30, 2023, 4:46 AM

#

I believe that static paths to images must put in /public folder.
Or if you want hydrate a img element u can import a image file from any place on /src/ dir and place the image var on src img attr.

golden spire Aug 30, 2023, 4:52 AM

#

anything in public doesnt get optimized though right?

golden spire Aug 30, 2023, 5:36 AM

#

just wrote actual css like this -

  body {
    background-image: url(../assets/images/light-sm.svg);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    inset: 0;
  }
  .dark body {
    background-image: url(../assets/images/dark-sm.svg);
  }

and it worked lol.. the apply was making it unnecessarily complicated

#background images in globalstyle