CSS-BackgroundImage-Blur.md

How to add a blur filter without white borders

1. Use the following css:

   .blur-image::before {
     content: "";
     position: absolute;
     z-index: 2;
     width: 100%;
     height: 100%;
     -webkit-backdrop-filter: blur(5px); 
     backdrop-filter: blur(5px);
     pointer-events: none; /* make the pseudo class click-through */
   }
   
   .blur-image {
     position: relative;
     width: 720px;
     height: 480px;
     background: no-repeat center center;
     background-size: cover;
   }

2. Add a div with .blur-image class.

   <div class="blur-image" style="background-image: url('URL_IMAGE')" />

Full example here