I'm using reveal.js: I'd like to display a full-screen image as a background, and once I move to a different slide I'd like to blur or dim it. Looking at Changing the background-image style in Reveal.js, I've tried this in my css:

.html.blur .backgrounds {
  -webkit-filter: blur(5px);
 -moz-filter: blur(10px);
 -o-filter: blur(5px);
 -ms-filter: blur(5px);
 filter: blur(5px);
}

and then in my markdown document I do an html ment with

.slide: data-background="figs/background.svg" data-background-size="contain" data-state="blur"

which creates a <section> tag with data-state="blur" inside. However, the background doesn't get blurred -- what am I missing?

I'm using reveal.js: I'd like to display a full-screen image as a background, and once I move to a different slide I'd like to blur or dim it. Looking at Changing the background-image style in Reveal.js, I've tried this in my css:

.html.blur .backgrounds {
  -webkit-filter: blur(5px);
 -moz-filter: blur(10px);
 -o-filter: blur(5px);
 -ms-filter: blur(5px);
 filter: blur(5px);
}

and then in my markdown document I do an html ment with

.slide: data-background="figs/background.svg" data-background-size="contain" data-state="blur"

which creates a <section> tag with data-state="blur" inside. However, the background doesn't get blurred -- what am I missing?

• javascript
• html
• css
• reveal.js

• May depends upon browsers – user4257136 Commented Aug 17, 2015 at 16:48
• Can you make a fiddle code – user4257136 Commented Aug 17, 2015 at 16:58
• I borrowed the fiddle from the SO question I linked to above, and modified it: jsfiddle/k85qny9k/2 -- the second slide should be blurred – Rok Commented Aug 17, 2015 at 17:08
• sorry, had a typo -- here's the fixed version: jsfiddle/k85qny9k/4 -- this seems to work, but it doesn't work in my actual slideshow... humm... – Rok Commented Aug 17, 2015 at 17:16

2 Answers 2

just a typo: no "." in front of html...

This will work and in addition to the blurring, do some dimming and saturation change, which will make the foreground text easier to read:

html.dim .backgrounds {
   -webkit-filter: blur(4px) saturate(.5) brightness(.8);
   -moz-filter: blur(4px) saturate(.7) brightness(.9);
   -o-filter: blur(4px) saturate(.7) brightness(.9);
   -ms-filter: blur(4px) saturate(.7) brightness(.9);
   filter: blur(4px) saturate(.7) brightness(.9);
}

and if you want it to look extra snazzy, you can add an animation:

@-webkit-keyframes blur-animation {
  0% {
    -webkit-filter: blur(0px) ;
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
    filter: blur(0px);

  }
  100% {
    -webkit-filter: blur(4px) saturate(.5) brightness(.8);
    -moz-filter: blur(5px) saturate(.7) brightness(.9);
    -o-filter: blur(5px) saturate(.7) brightness(.9);
    -ms-filter: blur(5px)saturate(.7) brightness(.9);
    filter: blur(5px) saturate(.7) brightness(.9);

  }
}

html.background-blur-animation .backgrounds {
   -webkit-animation-name: blur-animation;
   -webkit-animation-duration: 1s;
   -webkit-animation-iteration-count: 1;
   -webkit-animation-direction: alternate;
   -webkit-animation-timing-function: ease-out;
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-delay: 0s;
 }

Please check this line in your source

 html.blur.backgrounds {     
                   //no (. sign)is required in front of .html or copy the above line and paste it.