html - how to blur the background of the text while using bootstrap css file? -

i have following code: http://jsfiddle.net/leytgm3l/ , can see, use here extended resource - bootstrap.min.css. far page looks in result of fiddle. change darker background blurred (exactly in tutorial http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/ ). possible 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?

you're going need blank "background" div matches width/position/etc of content want on using blur property , z-index: -1;. example, had box 300px wide , 100px tall. i'd have make #blurredbackground div matches same width, height, , position filter: blur , z-index: -1 added.

html:

<div id="blurredbackground></div> <div id="content">     ... </div> 

css:

#content {     position: absolute;     bottom: 72px; left: 72px;     width: 300px;     height: 100px; }      #blurredbackground {     position: absolute;    /*matches #content position*/     bottom: 72px; left: 72px;    /*matches #content position*/     width: 300px;    /*matches #content width*/     height: 100px;    /*matches #content height*/     -webkit-filter: blur(10px);     filter: blur(10px);     z-index: -1; }