Nuxt•5mo 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

reinacchiOP•5mo ago

bump

SpiKe.•5mo ago

could you add a reproduction link?

MrBobDaisy•5mo ago

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

reinacchiOP•5mo ago

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

MrBobDaisy•5mo 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

reinacchiOP•5mo ago

alright

Gaming

Programming

background isn't adjusted properly