Consolidating data-background-* attributes

[jamesETsmith]

Problem

I want to add a logo image to some of my slides, but typing all of the data-background attributes is a bit messy.

<section data-background-image="/assets/logo.png" data-background-size="200px"
    data-background-position="bottom 100px right 100px">
    <h1>Bottom Right Background</h1>
</section>

Ideal Solution

I tried to assign all of these attributes using a given class and some css so the code above looked like:

<section class="logo-bottom-right">
    <h1>Bottom Right Background</h1>
</section>

But it didn't work. No logo showed up and no errors popped up in the developer console. Does anyone have advice about this?

Thanks!

[ddemoss222]

It would greatly simplify granular customizations of backgrounds to add a data-background-class attribute that could add the specified class to the specified slide background.

[Martinomagnifico]

Hi David, you can use data-state for that. That will add the specified class to the viewport element. So <section data-state=“bottomrightlogo”>…</section> will then create a structure stat can be styled like this:

.bottomrightlogo .backgrounds {
    background-image: url(/assets/logo.png);
    background-size: 200px;
    background-position="bottom 100px right 100px"
}

[weddige]

you can use data-state for that.

But then the logo won't be visible in the ?print-pdf-View.