I have a responsive web page where I have a lights effect using the canvas. It turns out that the effect should only stay on the banner area, I made a method here using the negative margin-top, but the result was not good, and the effect often exceeds the lower limit of the banner. I would like to know if there is another better solution to be implemented, follow my example.
HTML
<nav class="navbar navbar-default navbar-fixed-top">
<div>
<div>
<button type="button" class="navbar-toggle" data-toggle="collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a>
<img src="image/logo.png" alt="logo">
</a>
</div>
<div>
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</ul>
</div>
</div>
</nav>
<header id="banner_area">
<h1>Title</h1>
<h3>Sub-title</h3>
<div>
<a href="#section"></a>
</div>
<canvas id="canvas"></canvas>
</header>
<section id="section">...</section>
CSS
#banner_area{position:relative;}
#canvas{left: 0;}
@media (min-width: 320px) {#canvax {margin-top: -45%;}}
@media (min-width: 480px) {#canvax {margin-top: -38%;}}
@media (min-width: 720px) {#canvax {margin-top: -32%;}}
@media (min-width: 1280px) {#canvax {margin-top: -27%;}}
@media (min-width: 1920px) {#canvax {margin-top: -23%;}}