how can I blur an element that is described by bootstrap css? -

i created webpage uses bootstrap framework: http://jsfiddle.net/leytgm3l/ (there's extended resource bootstrap.min.css added). change darker background blurred (exactly in tutorial http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/ ). how can without modifing bootstrap css file? tried replace line:

background: rgba(0, 0, 0, 0.35); 

with suggest on tutorial:

#black{    -webkit-filter: blur(10px);     filter: url('/media/blur.svg#blur');     filter: blur(10px); } #black p, #black h1{ padding-left: 10px; padding-right: 10px; padding-bottom: 10px } 

but blurred text: http://jsfiddle.net/leytgm3l/1/

could me that?

in tutorial said, need block on use blur filter, , block must underneath or block content:

#search-bg {   /* absolutely position it, stretch 4 corners, put behind #search's z-index */   position: absolute;   top: 0px;   right: 0px;   bottom: 0px;   left: 0px;   z-index: 99;    /* pull background 70px higher same place #bg's */   background-position: center -70px;    -webkit-filter: blur(10px);   filter: url('/media/blur.svg#blur');   filter: blur(10px); }  #search {   /* put on top of blurred layer */   position: relative;   z-index: 100;   padding: 20px;   background: rgb(34,34,34); /* ie */   background: rgba(34,34,34,0.75); }