1

I have the following code: http://jsfiddle.net/Leytgm3L/ and as you can see, I use here extended resource - bootstrap.min.css. So far the page looks like in the result of this fiddle. I would like to change it so the darker background is blurred (exactly like in this tutorial http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/ ). Is it possible without modifing the bootstrap css file? I tried to replace this line:

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

with what they suggest on this 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 all I get is blurred text: http://jsfiddle.net/Leytgm3L/1/

could you help me with that?

Siguza
  • 21,155
  • 6
  • 52
  • 89
randomuser1
  • 2,733
  • 6
  • 32
  • 68
  • possible duplicate of [CSS blur on background image but not on content](http://stackoverflow.com/questions/20411257/css-blur-on-background-image-but-not-on-content) – Sam Jul 16 '15 at 18:10

1 Answers1

2

You're going to need a blank "background" div that matches the width/position/etc of the content you want it on using the blur property and z-index: -1;. For example, say I had a box that was 300px wide and 100px tall. I'd have to make a #blurredbackground div that matches that same width, height, and position with filter: blur and 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;
}
Kyle Horkley
  • 911
  • 1
  • 9
  • 23
  • thank you, could you help me with edditing my fiddle? I tried to do so and all I got is this http://jsfiddle.net/Leytgm3L/4/ – randomuser1 Jul 16 '15 at 18:19
  • thanks, that gives me some ideas, I just have some problems with including that into my bootstrap framework.. – randomuser1 Jul 16 '15 at 18:35
  • 1
    Please select as answer if it helped :D – Kyle Horkley Jul 16 '15 at 18:46
  • it helped, but only partialy :( I still struggle with blurring the element in my html code (that uses bootstrap), I know now thanks to you how to do it on plain html code, but I can't figure out how to do it on my existing one :( so maybe someone at some point will be able to help me with that.. – randomuser1 Jul 16 '15 at 18:52
  • @randomuser1 just use the inspect view and see whether every css modification above has been actually applied and not overwritten. – kiradotee Aug 31 '16 at 09:44