Clever Geek Handbook

Changing background image style in Reveal.js

I am trying to access the styles of the background image in show.js for three reasons:

a) I would like to override the background image in browse mode b) I would like to blur some backgrounds with CSS

I found two articles on SO that helped me:

a) How do I put a background image in show.js? b) Colored color options.

But I am 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 two background images suddenly appear. What am I doing wrong?

Thanks, Dirk

+3


source to share


1 answer


Instead of ".state-background", you must overwrite the ".backgrounds" class. Background images do not fit in ".slides". This is why your CSS does not blur background images.



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


source






More articles:


All Articles