CODEWITHSUNDEEP
javascriptcanvas
Grzes Slania
Grzes Slania

Reputation: 602

Set Canvas as background

I am having trouble setting the canvas as a background element. At the moment the canvas is separated from the header tag as you will see in the example. *The canvas #myCanvasis also generated by javascript. I have tried using z-index but that has not worked. Here is the jsbin link. http://jsbin.com/zikisu/1/

#myCanvas{
height: 400px;
width: 100%;
padding: 0px; z-index: -1; }
#mainTitle{
  z-index: 2;
}

h1 {

        color: #662d86;
}

#triangles{
    height: 400px;
    padding: 0px;
    background: -moz-element(#myCanvas);
}

#output{
    height: 400px;
}
<body>
  <div class="container" id="triangles">
                <div id="output">
                    <div id="mainTitle" class="row">
                        <div class="col-med-12 text-center">
                            <h1>Innovation
                            </h1>
                        </div>
                    </div>  
                </div>
            </div>  
</body>

Upvotes: 0

Views: 1697

Answers (2)

user1693593
user1693593

Reputation:

There is a lot of code to go through, but as a start: Try adjusting the CSS so that the canvas is treated as a fixed element (the browser may also give it a separate bitmap so performance is a tad better as well):

#myCanvas{
    position: fixed;
    left: 0;
    top: 0;
    height: 400px;
    width: 100%;
    z-index: -1; 
}

Upvotes: 0

machineghost
machineghost

Reputation: 35725

There is no way to "set canvas as background", because in HTML/CSS only colors and images can be backgrounds.

If you want the effect of the canvas element appearing as if it were the background, simply:

  1. put the <canvas> at the DOM root (ie. make it a child of <body>)
  2. put any other elements adjacent to it (ie. also as children of <body>)
  3. use CSS to position the other elements on top of the canvas element

It might be easier to do #2 and #3 by putting all the other elements in to a single <div> container. In other words:

<body>
    <canvas></canvas>
    <div id="container">
        <!-- put the rest of your page here -->
    </div>
</body>

That way you only have to style <div id="container">.

Upvotes: 1

Related Questions