javascript - Blur Background Img, Overflow Hidden, Align with parent div -

i have done research on this, none of answers helping me issue. here jsfiddle show have far.

problem:

• i having issue when comes on flow, can see background image overflowing wrapper.

• next issue, background image doesn't auto filling wrappers width. i'm assuming when overflow issue fixed might not problem anymore.

• lastly, when can fix everything, there way make wrapper extend height of background image without setting height myself.

here code:

#wrapper {     margin: 0 auto;     width: 70%;     border: #000000 solid 1px;     overflow: hidden !important; } .content:before {   content: "";   position: fixed;   z-index: -1;   background-image: url(../images/10034277536_1454f4e382_background.jpg);   background-repeat: no-repeat;   width: 100%;   height: 100%;   filter: blur(3px);     -webkit-filter: blur(3px);        -moz-filter: blur(3px);         -ms-filter: blur(3px);          -o-filter: blur(3px); }  .content {   z-index: 0; }  <div id="wrapper">     <div class="content">     hello world     </div> </div> 

thanks help.

have at: https://jsfiddle.net/5mahg3fp/

.content {     position: relative;     background-size: cover;  }  .content:before {   position: absolute; } 

positioning element absolutey instead of fixed , relatively #content fix first problem.

setting backgrund-size cover makes background grow size of element.

to have element automatically growing size of background assigned have insert background actual image, positioned statically. add content absolutely positioned child covers whole area.