Best way to Apply CSS to Slide Background?

[jkub6]

My goal is to apply custom styling to the background of a slide (gradients+image+etc...) to make a fade-in image/quote slide. This is relatively easy on the foreground portion of the slide, but I haven't found a good solution for the background. I have gotten something to work, but it seems a bit hacky - I set both and then "undo" the foreground. Is there any better way to make slide 2?

Slide 1 - Foreground

Slide 2 - Background (the goal)

---
format: "revealjs"
---


## {#quote-front}

:::: {.columns}
::: {.column width="60%"}
> "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In placerat tellus sed justo laoreet pulvinar. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Cras ac varius justo, in facilisis sem.
Ut ultrices, eros id blandit elementum, urna ipsum
scelerisque erat, vel vulputate odio diam at risus. Sed ut
nibh nulla."
:::
::::


## {.quote-back #quote-back2}

:::: {.columns}
::: {.column width="70%"}
> "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In placerat tellus sed justo laoreet pulvinar. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Cras ac varius justo, in facilisis sem.
Ut ultrices, eros id blandit elementum, urna ipsum
scelerisque erat, vel vulputate odio diam at risus. Sed ut
nibh nulla.”
:::
::::


<style>
#quote-front {
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    background-image:
    linear-gradient(to right, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 80%),
    url(./image.png);
}

.quote-back {
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    background-image:
    linear-gradient(to right, rgba(255,255,255,1) 60%, rgba(255,255,255,0) 80%),
    url(./image.png);
}

#quote-back2 {
    background-color: #00000000;
    background-image: none;
}
</style>

[mcanouil]

Try setting the background following https://quarto.org/docs/presentations/revealjs/index.html#slide-backgrounds and modify the associated (S)CSS (use your browser inspect/developper mode).

[jimjam-slam]

Hey @jkub6! I did some experimenting with this and was able to combine gradient backgrounds with image/iframe backgrounds.

Here's a demo (code here)

It might not work for your particular use case, because with my method the image ends up on top of the gradient—you have to make the image semi-transparent for the gradient to show through underneath. So you can't have the gradient completely obscure the image. You'd need a "baked" gradient in the image in that case.

That said, I believe gradient backgrounds were "officially" introduced in Revealjs 4.4.0, and Quarto still uses a version < 4. Upgrading is on the release schedule for Quarto 1.4 (see #4795) , but I don't know if they plan to upgrade all the way to 4.4.0. Hopefully if they do, this kind of thing will be more feasible!

[jkub6]

Thanks everyone for the ideas! It is impressive what Quarto/Revealjs is capable of. Here is a solution I found that uses the "data-state" attribute and CSS custom properties:

---
format: "revealjs"
title: "test"
---


## {data-state="quote face1"}
<style>.face1 {--i:url('face1.jpg')}</style>

:::: {.columns}
::: {.column width="70%"}
> "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In placerat tellus sed justo laoreet pulvinar. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Cras ac varius justo, in facilisis sem.
Ut ultrices, eros id blandit elementum, urna ipsum
scelerisque erat, vel vulputate odio diam at risus. Sed ut
nibh nulla.”
:::
::::


## {data-state="quote face2"}
<style>.face2 {--i:url('face2.jpg'); --r:-1}</style>

:::: {.columns}
::: {.column width="40%"}

:::
::: {.column width="60%"}
> "Lorem ipsum dolor sit amet, consectetur adipiscing elit.
In placerat tellus sed justo laoreet pulvinar. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per
inceptos himenaeos. Cras ac varius justo, in facilisis sem.
Ut ultrices, eros id blandit elementum, urna ipsum
scelerisque erat, vel vulputate odio diam at risus. Sed ut
nibh nulla.”
:::
::::






<style>
.quote .backgrounds::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background-position: right;
    background-repeat: no-repeat;
    background-size: contain;
    background-image:
    linear-gradient(to right, rgba(255, 255, 255, 1) 60%, rgba(255,255,255,.5) 70%, rgba(255, 255, 255, 0) 100%),
    var(--i);
    transform: scaleX(var(--r));
}

</style>