I am building a quarto template, emulating a PPT from my anization.

I specified backgrounds and institutional logos in the css with a placement similar to the ppt. When I render the background and logos are called twice, once for the screen (full width) and one below the space reserved for letters/titles.

Perhaps there is a default parameter I need to override, but I cannot find it.

Output header 2

Wanted header 2

Current header 1, notice logos called twice collapsed at the right of the title

Wanted header 1(No double call of slide elements, from PPT)

Below I provide my current css and presentation:

Images used in the code below:

• Title page cover
• background image, header 1
• background for header 2 and less

Icons could not be uploaded, due to svg format(?)

The CSS:

/*-- scss:defaults --*/
// Base document colors
$body-bg-alpha: "0";

/* Title Slide */
.reveal .title-slide {
  background-image: url('/Slide_portada.png');
  background-size: cover;
  background-color: black; /* Fallback color */
  color: white; /* Text color for readability */
  position: relative; /* Enable relative positioning for child elements */
}

/* Icon 2: Top Right */
.reveal .title-slide::before {
  content: url('/icon2.svg'); /* Load the logo */
  position: absolute;
  top: 2%; /* Adjust the vertical positioning */
  right: 8%; /* Adjust the horizontal positioning */
  width: 5%; /* Responsive width */
  max-width: 50px; /* Ensure a reasonable maximum size */
}

/* Icon 3: Bottom Right */
.reveal .title-slide::after {
  content: url('/icon3.svg'); /* Load the logo */
  position: absolute;
  bottom: 5%; /* Adjust the vertical positioning */
  right: 8%; /* Adjust the horizontal positioning */
  width: 5%; /* Responsive width */
  max-width: 50px; /* Ensure a reasonable maximum size */
}

/* Level 1 Slides */
.reveal .slide.level1 {
  background-image: url('/bg1.jpeg');
  background-size: cover; /* Adjusts to cover entire slide */
  background-position: center;
  color: black;
  padding-top: 60px;
}

.reveal .slide.level1 h1 {
  color: white !important; /* Title in white */
  margin-top: 10px; /* Adjust for positioning */
}



/*Level 2 Slides */
 .reveal .slide.level2 {
    padding: 0% 0%;
    width: 100%;
    height: 100%;
    display: block;
    position: fixed;
    background-image: url('/bg2.png');
    background-repeat: no-repeat;
    background-size: 100% 20%;
}


/* Icon 2: Top Left */
.reveal .slide.level2::before {
  content: url('/icon2.svg'); /* Load the logo */
  position: absolute;
  top: 2%; /* Adjust the vertical positioning */
  left: 2%; /* Adjust the horizontal positioning */
  width: 7%; /* Responsive width */
  max-width: 10%; /* Ensure a reasonable maximum size */
}

/* Icon 3: Top Right */
.reveal .slide.level2::after {
  content: url('/icon3.svg'); /* Load the logo */
  position: absolute;
  top: 2%; /* Adjust the vertical positioning */
  right: 2%; /* Adjust the horizontal positioning */
  width: 7%; /* Responsive width */
  max-width: 10%; /* Ensure a reasonable maximum size */
}




/* Existing CSS */





/* Remove background for all text elements (h1, p, etc.) */
.reveal .slides h1, 
.reveal .slides h2, 
.reveal .slides h3, 
.reveal .slides h4, 
.reveal .slides h5, 
.reveal .slides h6, 
.reveal .slides p {
  background: none !important; /* Remove background */
  color: inherit; /* Ensure text color is inherited */
  box-shadow: none; /* Remove any shadow applied to text */
  $body-bg-alpha: "1";
}

/* Apply alpha transparency to header backgrounds (if needed) */
.reveal .slides h1, 
.reveal .slides h2, 
.reveal .slides h3, 
.reveal .slides h4, 
.reveal .slides h5, 
.reveal .slides h6 {
  background-color: rgba(0, 0, 0, 1); /* Black with 30% opacity for transparency */
  padding: 5px; /* Optional padding */
  border-radius: 5px; /* Optional rounded corners */
  color: white; /* Make text readable */
}

/* Apply transparent background to regular text if needed */
.reveal .slides p {
  background-color: rgba(0, 0, 0, 0); /* Fully transparent background */
}

The yaml & quarto example

---
title: "Título  (Aguanta sólo 1 línea)"
subtitle: "Subtítulo" 
author: "Autor/presentador"
institute: "SDAP"
date: today
date-format: "D / MM / YYYY"
title-slide-attributes:
  data-background-image: /Slide_portada.png
  data-background-size: cover
  data-background-opacity: "1"
  data-background-color: black
  center-title-slide: true
format:
  revealjs:
    incremental: true  # Only affects HTML presentations; will not work for PowerPoint
#    theme: simple      # Choose a theme or remove this line
    css: [template_INE2c.css]
---

# Header 1

## Header 2

- list
- list