Beside slides and templates, a DeckDeckGo deck could also contain a customized element background which could be injected using a dedicated slot.

Table of contents


The slot background provided for the deck will be cloned into each slides of your presentation.

Optionally, if you wish, this slot could also not be cloned, could be useful in case you rather would like to display a background which follows your entire presentation.


The following attribute could be applied to the deckgo-deck element:

cloneBackgroundclone-backgroundSet to false in case you don't want to clone the background in each slidesbooleantrue


The following theming options will affect the slot background if set on the deckgo-deck or any slides.

CSS4 variableDefaultNote
--slide-background-positionabsoluteThe position of the background
--slide-background-top0Top value
--slide-background-endIn LTR, right value
--slide-background-start0In LTR, left value
--slide-background-widthA background width, default without being set all width
--slide-background-heightA background height, default without being set all height
--slide-background-print-displaynoneDon't print per default the background


An example with an image cloned as background for each slides:

<deckgo-deck> <deckgo-slide-title> <h1 slot="title">My presentation title</h1> <p slot="content"> Hello World ๐Ÿš€ </p> </deckgo-slide-title> <img slot="background" data-src=""> </deckgo-deck>

An example with a more complex html and css element which is set as background for the all presentation:

<deckgo-deck clone-background="false"> <deckgo-slide-title> <h1 slot="title">My presentation title</h1> <p slot="content"> Hello World ๐Ÿš€ </p> </deckgo-slide-title> <div class="circle" slot="background"></div> </deckgo-deck>

where for example the related circle css code could be: { position: absolute; left: 50%; transform: translate(-50%, 0); bottom: -10vh; width: 800vw; height: 100vh; border-radius: 50%; background: yellow; opacity: 0.3; }