Reveal.JS

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/reveal.js/2.5.0/css/reveal.min.css">
<script src="//cdn.jsdelivr.net/reveal.js/2.5.0/lib/js/head.min.js"></script>
<script src="//cdn.jsdelivr.net/reveal.js/2.5.0/js/reveal.min.js"></script>
<div class="reveal">
    <div class="slides" id="slides">
        <section data-background="http://www.primenergy.com/images/pic_wellTest/wellTest02.jpg"></section>
        <section data-background="http://www.cismst.org/typo3temp/pics/1dd4cb4f88.jpg" data-state="thisState"></section>
    </div>
    <!-- /slides -->
</div>
<!-- /reveal -->

CSS

html.thisState .state-background {
     
     /* background image is NOT changed, but the backgroundcolor changes */

     background-color: rgba(0, 0, 0, 0.3);
     background-image: url('http://pngimg.com/upload/small/key_PNG1180.png');
     /* webkit-filter: blur(5px);
     -moz-filter: blur(5px);
     -o-filter: blur(5px);
     -ms-filter: blur(5px);
     filter: blur(5px); */
 }

JavaScript

Reveal.initialize({
      controls: true,
      progress: true,
      history: true,
      center: false,
      transition: 'none',
      slideNumber: true
  });