Quarto-html watermark

Issue

Why the captioned figures in Quarto won't stay behind the watermark? When the figure has captions and is referenced in the main text the watermark disappears. Instead the figures without caption will be behind the watermark

Code example

---
title: | 
    | Title
author:
    - Author
date: "`r format(Sys.time(), '%d %B, %Y')`"
toc: true
toc_float: true
number_sections: true
format: 
  html:
    theme: lumen
    embed-resources: true
---


<style>

.draft-watermark {

    position: fixed; top: 50%; left: 50%;

    transform: translate(-50%, -50%) rotate(-45deg);

    font-size: 100px; font-weight: bold; color: #ccc; opacity: 0.5; }

</style>

<div class="draft-watermark">Draft</div>


```{r setup, message=F, warning=FALSE,echo=F}


# Packages
library(tidyverse)
library(ggplot2)


```


## Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

## Running Code

When you click the **Render** button a document will be generated that includes both content and the output of embedded code. You can embed code like this:

```{r}
1 + 1
```

You can add options to executable code like this

```{r}
#| echo: false
2 * 2
```

The `echo: false` option disables the printing of code (only output is displayed).


```{r p1, eval=T, echo=F, warning=F, message=F, fig.height=6, fig.width=8}

mtcars %>% 
  ggplot(aes(x = hp, y = mpg)) + geom_point()
```

@fix-ex1


```{r p2, eval=T, echo=F, warning=F, message=F, fig.height=6, fig.width=8}
#| label: fig-ex1
#| fig-cap: "Watermark now is hidden"

mtcars %>% 
  ggplot(aes(x = hp, y = mpg)) + geom_point()
```

Instead as you can notice from the snip the watermark can stay above the top figure (not captioned) but it goes beyond the bottom figure (captioned) - both figure are the same, have similar settings but the only difference is to be captioned -referenced in the main text

Outcome

Solution

You could use a z-index (as also mentioned by @A-tech in the comments) to your css to keep the watermark in front of all other elements like this:

---
title: | 
    | Title
author:
    - Author
date: "`r format(Sys.time(), '%d %B, %Y')`"
toc: true
toc_float: true
number_sections: true
format: 
  html:
    theme: lumen
    embed-resources: true
---


<style>

.draft-watermark {

    position: fixed; top: 50%; left: 50%;

    transform: translate(-50%, -50%) rotate(-45deg);
    
    z-index: 1000;

    font-size: 100px; font-weight: bold; color: #ccc; opacity: 0.5; }

</style>

<div class="draft-watermark">Draft</div>


```{r setup, message=F, warning=FALSE,echo=F}


# Packages
library(tidyverse)
library(ggplot2)


```


## Quarto

Quarto enables you to weave together content and executable code into a finished document. To learn more about Quarto see <https://quarto.org>.

## Running Code

When you click the **Render** button a document will be generated that includes both content and the output of embedded code. You can embed code like this:

```{r}
1 + 1
```

You can add options to executable code like this

```{r}
#| echo: false
2 * 2
```

The `echo: false` option disables the printing of code (only output is displayed).


```{r p1, eval=T, echo=F, warning=F, message=F, fig.height=6, fig.width=8}

mtcars %>% 
  ggplot(aes(x = hp, y = mpg)) + geom_point()
```

@fix-ex1


```{r p2, eval=T, echo=F, warning=F, message=F, fig.height=6, fig.width=8}
#| label: fig-ex1
#| fig-cap: "Watermark now is hidden"

mtcars %>% 
  ggplot(aes(x = hp, y = mpg)) + geom_point()
```

Output:

As you can see it is in front of the visual with a caption.

Answered By - Quinten