How can I increase the height of the title block banner?

[ggcostoya]

Description

I'd like to increase the size of a the title-block-banner while including a specified image. Any tips? Here's some reproducible code of a .qmd file for what I am trying to accomplish:

---
title: A test page
title-block-banner: example.JPG
title-block-banner-color: white
---
<style>
    .title-block-banner {
        height: 800px; 
    }
</style>

I've also tried to change the .title-block-banner option for .quarto-title-block-banner. Neither had any effect.

Any help is appreciated!

Q

[mcanouil]

Raw language should be put in raw code block: see https://quarto.org/docs/authoring/markdown-basics.html#raw-content

As with everything HTML related, your favourite browser is there with its inspect/developer mode.
See

You are targeting something that does not exist, directly from the HTML page:

<header id="title-block-header" class="quarto-title-block default page-columns page-full">
  <div class="quarto-title-banner page-columns page-full">
    <div class="quarto-title column-body">
      <h1 class="title">A test page</h1>
    </div>
  </div>
  <div class="quarto-title-meta">
  </div>
</header>

You need to target the proper elements.

Also use prefer to use css, theme, or include-in-header to add such content to your documents:

• https://quarto.org/docs/output-formats/html-basics.html#includes
• https://quarto.org/docs/output-formats/html-themes.html