Rise: Add a backgroung image to the slideshow

[nusselt85]

Is it possible to add a background image for the slideshow?
In reveal.js the data-background="image.png" is used but I have not be able to make it work

[damianavila]

It should be possible but you probably need to hack on the source code... we did not provide data-background capabilities yet...

[soamaven]

This would be a very welcome awesome. I wish I knew css to help implement this customization through the notebook metadata.

Am going to attempt to create a custom theme with my desired background image, would you recommend this approach for a css novice?

[soamaven]

I learned as much css as I could overnight... I tried to copy one of the .css themes and simply edit the "body" div to be
body { background: url('image.png'); background-position: cover }

I then used the metadata method to call this new them. No luck.
Having trouble with calling some of the other themes with this method however, so maybe its not the .css code here

[seddon-software]

You can add a background image (with a linear gradient) as below, by adding code to the custom.css file. The file must be in the directory:

• ~/.jupyter/custom/custom.css

.rise-enabled {
    background-color: azure !important;
    font-size: 125% !important;
    background-image: url(CRS-Enterprises.jpg), linear-gradient(30deg, #7ab8ec, white 75%, white);
    background-position: right top;
    background-repeat: no-repeat;
    background-origin: content-box;
    padding: 5px 5px 5px 5px;
}

[soamaven]

This works! Thanks, can we include this in the README? Also, could this work similar to the custom transitions via the notebook meta-data method to change the style? It would be ideal to have separate backgrounds for each notebook rather than all.

A part that I don't understand about your code, is where is the background-image CRS-Enterprises.jpg comes from/is found

[damianavila]

We provide now a new mechanism to add a background image, see #296 and #310. Closing here.

[Foadsf]

One workaround is to use HTML adding a background image:

<div style="background-image: url(pics/bg1.png); background-repeat: no-repeat; background-size: contain; height: auto; width: 100%; ">
 this is
some 

text on top of the background 

image
</div>