How to add a Music Visualisation to header

  • Author
  • #102589

    I have what seems to be a perfect visualiser for for the small header on the Mantra theme. Nice theme by the way.

        <style type='text/css'>
          html {
            height: 100%;
          body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            background: #555;
            margin: 0;
          canvas {
            position: absolute;
            top: 0;
            left: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
          div#bgimage {
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
          div#debug {
            font-family: Arial, Helvetica, sans-serif;
            color: white;
            position: absolute;
            top: 2rem;
            left: 2rem;
            z-index: 999;
          div#debug > h1 {
            padding: 1rem;
        <div id='bgcolor' class='bg'></div>
        <div id='bgimage' class='bg'></div>
        <canvas id='canvas'></canvas>
        <!-- div id='debug'>
          <h1 id='debug1'></h1>
          <h1 id='debug2'></h1>
        </div -->

    How do I get the visualiser to show in the header? Preferably above the header image/logo?
    Many thanks,


Viewing 1 post (of 1 total)

The topic ‘How to add a Music Visualisation to header’ is closed to new replies.