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

reinaOP•10mo ago

bump

SpiKe.•10mo ago

could you add a reproduction link?

MrBobDaisy•10mo ago

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

reinaOP•10mo ago

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

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

reinaOP•10mo ago

alright

Gaming

Programming

background isn't adjusted properly

Did you find this page helpful?