javascript - Blurred background for a div element -

i making image library. have div inside kept image. want div have same image background blurred. used common css3 blur option child elements gets blurred (in case image). new javascript, love simple code.

your question more of css question if anything. guessing doing is:

html:

<div class="parentelement">     <div class="child"></div> </div> 

css:

.parentelement { filter: blur(15px); } 

or in js:

document.getelementsbyclassname("parentelement")[0].style.filter = "blur(15px)"; 

this blur background elements in parentelement.

the best solution blur background of element create separate child inside parentelement background (or whatever called class background) , set styles so:

html:

<div class="parentelement">     <div class="background"></div>     <div class="child"></div> </div> 

css:

.background { filter: blur(15px); } 

or in js:

document.getelementsbyclassname("background")[0].style.filter = "blur(15px)"; 

you need make class "background" act background , need make full width of parent element , position absolute.

css:

.parentelement { position:relative; }  .background { position:absolute; top:0; left:0; width:100%; height:100%; filter: blur(15px); }