Place P5 Sketch as Section Background

Question

I'm configuring a Bootstrap template and trying to set a P5.js sketch as the background to a section of the website.

I've tried creating a div inside the section and then setting the CSS of the div as position: absolute !important; however, this still displaces everything else and does not fill the section area.

What is the most robust solution to insert the sketch into the section so it completely fills it as a background without disturbing any other components?

<section class="resume-section p-3 p-lg-5 d-flex d-column" id="about">
    <div id="container"></div>
    <div class="my-auto">
        <h1 class="mb-0">Charles
                <span class="text-primary">Fried</span>
              </h1>
        <div class="subheading mb-5">Give a description
            <a href="mailto:name@email.com">name@email.com</a>
        </div>
        <p class="mb-5">Blahhhhhhh</p>
        <ul class="list-inline list-social-icons mb-0">
            <li class="list-inline-item">
                <a href="#">
                    <span class="fa-stack fa-lg">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
                    </span>
                  </a>
            </li>
            <li class="list-inline-item">
                <a href="#">
                    <span class="fa-stack fa-lg">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
                    </span>
                  </a>
            </li>
            <li class="list-inline-item">
                <a href="#">
                    <span class="fa-stack fa-lg">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
                    </span>
                  </a>
            </li>
            <li class="list-inline-item">
                <a href="#">
                    <span class="fa-stack fa-lg">
                      <i class="fa fa-circle fa-stack-2x"></i>
                      <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                    </span>
                  </a>
            </li>
        </ul>
    </div>
</section>

P5 sketch:

function setup() {

    var clientHeight = document.getElementById('about').clientHeight;
    var clientWidth = document.getElementById('about').clientWidth;

    var cnv = createCanvas(clientHeight, clientWidth);
    cnv.parent("container");
    background(0);
}

EDIT: I've put a JSfiddle together in the hope that someone can help me figure this out. For clarity, the canvas should fill the yellow area (section) without displacing any items within it.

Possible duplicate of [How to put p5 canvas into our div background?](https://stackoverflow.com/questions/46874608/how-to-put-p5-canvas-into-our-div-background) — Kevin Workman, Nov 15 '17 at 21:46
I have gone through this answer and haven't been able to find a solution. — Charles, Nov 15 '17 at 21:50
In that case, can you please post a [mcve] that we can play with? Or better yet, a CodePen or JSFiddle? — Kevin Workman, Nov 15 '17 at 22:01
I have tried, however, there are so many references to local files it seems very complicated to condense into a runnable JSFiddle without it completely breaking. Am I missing a solution to upload all dependencies? — Charles, Nov 15 '17 at 22:29
What local files do you need to reference to create an example that shows a P5.js sketch as the background of a div? — Kevin Workman, Nov 15 '17 at 23:06
Very little, however in my understanding there's some conflicting styling with one of the CSS files referenced. Anyway, I'll try again to create a runnable example. — Charles, Nov 16 '17 at 08:24
Ok, I've put together a JSfiddle which hopefully isn't oversimplified and works when I put it back together. — Charles, Nov 18 '17 at 20:36

score 3 · Accepted Answer · answered Nov 18 '17 at 20:58

Ok so after playing around with it, it seems the solution is pretty simple.

The canvas can be inserted directly into the <section> element by using its id:

function setup() {

 var clientHeight = document.getElementById('about').clientHeight;
 var clientWidth = document.getElementById('about').clientWidth;

 var cnv = createCanvas(clientWidth, clientHeight);
 cnv.parent("about");
 background(0);
}

The canvas can then be styled using CSS with the canvas keyword:

canvas {
  position: relative;
  z-index: -3 !important;
}

You should [accept this answer](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) so the question is not marked as still needing an answer. — Kevin Workman, Nov 20 '17 at 18:38

Place P5 Sketch as Section Background

1 Answers1