Nuxt•2mo ago

background isn't adjusted properly

hey. does anyone know how to solve this background issue? here's the code sample:

<template>
  <div class="relative min-h-screen bg-gradient-to-r from-purple-100 via-pink-200 to-purple-100">
    <Navbar />
    <img src="./assets/img/cont_corner_topl.png" alt="Top Image" class="top-image noselect" draggable="false" />
    <img src="./assets/img/cont_corner_bottomr.png" alt="Down Image" class="down-image noselect" draggable="false" />
    <NuxtPage />
  </div>

</template>

<script setup>
useHead({
  title: "麗奈っち // reinacchi",
  link: [
    {
      rel: "stylesheet",
      href: "https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css",
    },
  ],
});
</script>

<style>
.top-image {
  @apply absolute top-0 left-0 w-64 h-64;
}

.down-image {
  @apply absolute bottom-0 right-0 w-64 h-64;
}

@media (min-width: 768px) {
  .top-image {
    @apply w-96 h-96;
  }

  .down-image {
    @apply w-96 h-96;
  }
}
</style>

<template>
  <div class="relative min-h-screen bg-gradient-to-r from-purple-100 via-pink-200 to-purple-100">
    <Navbar />
    <img src="./assets/img/cont_corner_topl.png" alt="Top Image" class="top-image noselect" draggable="false" />
    <img src="./assets/img/cont_corner_bottomr.png" alt="Down Image" class="down-image noselect" draggable="false" />
    <NuxtPage />
  </div>

</template>

<script setup>
useHead({
  title: "麗奈っち // reinacchi",
  link: [
    {
      rel: "stylesheet",
      href: "https://site-assets.fontawesome.com/releases/v6.1.1/css/all.css",
    },
  ],
});
</script>

<style>
.top-image {
  @apply absolute top-0 left-0 w-64 h-64;
}

.down-image {
  @apply absolute bottom-0 right-0 w-64 h-64;
}

@media (min-width: 768px) {
  .top-image {
    @apply w-96 h-96;
  }

  .down-image {
    @apply w-96 h-96;
  }
}
</style>

6 Replies

reinacchi•2mo ago

bump

SpiKe.•2mo ago

could you add a reproduction link?

MrBobDaisy•2mo ago

@reinacchi What is the issue that you're looking at?

reinacchi•2mo ago

the white background is the problem the background isn't entirely filled when the page is scrollable

MrBobDaisy•2mo ago

I'd recommend making the background of NuxtPage to the image, but if you can't do that, you might need to set the styles to absolute top-0 bottom-0 w-full h-full or absolute top-0 bottom-0 w-full h-screen

reinacchi•2mo ago

alright

Gaming

Programming

background isn't adjusted properly