Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
1 reply
Viroz

position fixed and width of element

I am struggling with the width of my element which makes website background blurry. I created animation with p5js and wanted to blur it, so I added a div which covers the entire page using this code:
#app {
  display: grid;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  min-height: fit-content;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
.blur {
  display: block;
  position: fixed;
  inset: 0;
  z-index: -1;
  backdrop-filter: blur(60px);
}

and it works fine, but when I am vertically resize my website, it doesn't change its width accordingly.
My app structure:
<template>
  <Navbar />
  <MobileNavbar />
  <RouterView></RouterView>
  <div class="blur"></div>
</template>
image.png
Was this page helpful?