How to create a revealjs slide with a banner title in Quarto?

Question

How can I create a slide whose title is displayed over a colored rectangle that extends to the left, right, and top of the slide (but just a little below the bottom of the title text)? In other words, something similar to what I've shown below (in Quarto) except that unfortunately, the h2 background does not extend to the edges (i.e., is not a "banner").

---
format: 
  revealjs:
    theme: custom.scss
---

## Slide with banner title

I would like:

-   The title to appear where it currently appears

-   But the grey background rectangle to extend all the way to the left, right, and top of the slide.

and

/*-- scss:rules --*/

h2 {
  color: white !important;
  background-color: dimgrey !important;
}

Answer 1

To create a banner title, I have made the width of the h2 twice the entire viewport width and then moved it to the left and added left padding of the same amount, so that the h2 text remains at the same place and lastly, used margin: 0 in the yaml section so that this banner covers the top portion too.

presentation.qmd

---
format:
  revealjs:
    margin: 0
    theme: custom.scss
---

## Slide with banner title

I would like:

- The title to appear where it currently appears

- But the grey background rectangle to extend all the way to the left, right, and top of the slide.

custom.scss

/*-- scss:rules --*/

section.slide h2 {
  color: white !important;
  background-color: dimgrey !important;
  width: 200vw;
  position: relative;
  left: -20vw;
  padding-left: 20vw;
  padding-top: 5px;
  padding-bottom: 5px;
}

Note: If you use the logo option along with the slide-number, slide number will be moved to the top-right position and it may not be visible depending on what background color is used for the banner (but the slide number will be there) and so you may need to change the slide number color accordingly using the .slide-number class.