KPC
Kevin Powell - Community•2y ago
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);
}
#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>
<template>
  <Navbar />
  <MobileNavbar />
  <RouterView></RouterView>
  <div class="blur"></div>
</template>
1 Reply
Viroz
VirozOP•2y ago
it covers website, but looks like only backdrop-filter doesn't update

Did you find this page helpful?