Nuxt•8mo 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•8mo ago

bump

SpiKe.•8mo ago

could you add a reproduction link?

MrBobDaisy•8mo ago

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

reinacchiOP•8mo ago

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

MrBobDaisy•8mo 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•8mo ago

alright

Gaming

Programming

background isn't adjusted properly

Did you find this page helpful?