How to set a blur filter on a pure css div with background: url() only within another div ?

An example on a photo, through filter: blur(10px) indistinct borders of blur turn out

PSD example

    1 answer 1

    Wrap a div with a blur property in a div with an overflow:hidden property:

     .parent{ background-image:url("https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; height:200px; padding:50px 0; } .inner{ overflow:hidden; } .blur{ background-image:url("https://cdn.sstatic.net/Sites/stackoverflow/img/error-lolcat-problemz.jpg"); background-position:center center; background-repeat:no-repeat; background-size:cover; height:100px; filter: blur(10px); } 
     <div class="parent"> <div class="inner"><div class="blur"></div></div> </div>