the confetti animation - richtig anzeigen via css [SOLVED]

Hallo Contao Commuity,

ich benötige einen Denkanstoß oder Lösungsvorschläge bzgl. der Implementierung des Konfettieffektes in den Hintergrund der Seite.

Der Konfettieffekt soll sich über dem Hintergrundbild und unter den Inhaltselementen befinden. Ich vermute ich habe hier ein css-Brett vor dem Kopf. Irgendwie bekommt das <canvas> Element nicht die entsprechende Höhe der Seite ausgelesen in der diese aktuell angezeigt wird. Die Breite funktioniert allerdings. Der Effekt an sich funktioniert, daher gehe ich davon aus, dass das the-confetti-animation.js korrekt eingebunden und verarbeitet wird.

the confetti animation:
https://codepen.io/iprodev/pen/azpWBr


St.Bock Testseite (Contao 4.4.44 LTS) mit Rocksolid Theme TAO
http://v4test.st-bock.de/

Ausgabeseite
Anhang 22916

HTML-Code:

---

<!-- confetti animation begin -->
<div id="codeschnipsel">
<div class="inside">
<canvas height="25" id="confetti" width="1899">
</canvas>
</div>
</div>
<!-- confetti animation end -->

---

-> wieso verpackt mir Contao meinen simplen <canvas> tag in die beiden <div> codeschnipsel & inside? Liegt hier die Ursache des Problems?

Module: confetti-animation-canvas

HTML-Code:

---

<canvas height="1" id="confetti" width="1"></canvas>

---

Theme: Full-Width (Without Breadcrumbs)
Anhang 22917


Aufruf des Frontend-Modules confetti-animation-canvas im Full-Width (Without Breadcrumbs) Tao Theme an der manuellen Position eigene codeschnipsel

Template: fe_page.html5

PHP-Code:

---

<?php $this->extend('fe_page') ?>
<?php $this->block('body') ?>
    <!--[if lt IE 8]>
        <p>You are using an outdated browser. <a href="http://whatbrowser.org/">Upgrade your browser today</a>.</p>
    <![endif]-->
<!-- confetti animation begin -->
<?php $this->section('codeschnipsel'); ?>
<!-- confetti animation end -->
    <?php echo $this->sections('top') ?>
    <div class="page">
        <?php if ($this->header): ?>
            <header class="page-header">
                <?php echo $this->header ?>
            </header>
        <?php endif ?>

        <?php echo $this->sections('before') ?>

        <div class="content-wrapper">

            <section role="main" class="main-content">

                <?php echo $this->main ?>

                <?php echo $this->sections('main') ?>

            </section>

            <?php if($this->left && $this->right): ?>
                <aside class="sidebar">
                    <?php echo $this->left ?>
                </aside>
                <aside class="sidebar -right">
                    <?php echo $this->right ?>
                </aside>
            <?php elseif($this->left || $this->right): ?>
                <aside class="sidebar">
                    <?php echo $this->left ?>
                    <?php echo $this->right ?>
                </aside>
            <?php endif ?>

        </div>

        <?php echo $this->sections('after') ?>

        <?php if ($this->footer): ?>
            <footer class="page-footer">
                <?php echo $this->footer ?>
            </footer>
        <?php endif ?>
    </div>
    <?php echo $this->sections('bottom') ?>

<?php $this->endblock('body') ?>

---

In der css-Datei habe ich nix festgelegt, alle positons, die ich probiert habe, funktionieren nicht und führen dazu, dass das <canvas> die Höhe 0 annimmt in der Ausgabe.
custom.css

Code:

---

/* ------- confetti-animation formatierung ------- */
#confetti{
/* position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: -1; */

---

Wie bekomme ich das hin?

update: einen Schritt weiter: mit

Code:

---

echo $this->sections['codeschnipsel']

---

wird kein DIV drumherum gelegt.

SOLVED:
tja lag tatsächlich an den extra divs, die contao von selbst drumherum gebastelt hatte...

Code:

---

#confetti{
 position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;

---

so itst richtig positioniert nun