Quarto revealjs presentation -- How to add full height bars to extreme left + right?

[jchou]

I am trying to add 2 narrow (5% view width) vertical bars to the extreme left and right of a Quarto revealjs presentation title slide, but am only able to have the bars render within the "body" area (below the slide title and with margins to the sides) and not spanning the entire "screen". What I have so far:

# Slide Title {background-color="#B1E4E3"}

::: {.absolute style="background: #003A96; right=0; top=0; width:5vw; height:100vh;"}
:::

- foo
- bar

I tried experimenting with screen-column, but did not succeed.

Is this possible?

Apologies -- I know nearly nothing about CSS.

[cteague]

A couple of ideas you could try -

You could experiment with negative absolute values to move the div outside the body area (which is where its position is computed). For example:

# Slide Title {background-image="bg.png"}

::: {.absolute right="-85" top="-40" style="background: #003A96; width:5vw; height:100vh;"}
:::

- foo
- bar

or could also try making an image with the bands and using that as a background image, like so:

# Slide Title {background-image="bg.png" background-size="100% 100%"}

- foo
- bar

[jchou]

Thanks. The first option seems too brittle, but the second sounds like it'd be more robust. I was just hoping for something a little more "elegant" (for some arbitrary definition of "elegant", lol)