Changing the background-image style in Reveal.js

css, javascript, reveal.js

Solution

You have to overwrite the ".backgrounds" class instead ".state-background". Background images are not placed in ".slides". That's why your CSS code wont blur the background images.

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

Problem

I am trying to access the styles of the background-image in reveal.js for three reasons: a) I'd like to override the background image in the overviewmode b) I'd like to blur some backgrounds with CSS I found two articles on SO that helped me: a) How to position a background image in reveal.js? b) reveal.js background color choices But I must be missing something, so I created this jsFiddle to demonstrate the problem: http://jsfiddle.net/dirkk0/asya4grv/ ``` html.thisState .state-background { /* background image is NOT changed, but the backgroundcolor changes */ background-color: rgba(0, 0, 0, 0.8); background-image: url('http://pngimg.com/upload/small/key_PNG1180.png'); } ``` You can see that there are suddenly two background images. What am I doing wrong? Thanks, Dirk

Original source

Related problems