I've just started to learn web development and i'm stick with an issue.
I try to use one canvas as a header site. I'm trying to use this one:
https://codepen.io/towc/pen/mJzOWJ
But unfortunately, even if the canvas is in a div, when i resize my window the canvas don't work propely and the canvas become taller than before.
I've already try to put the canvas in a the proper div, and initialize the height=100% and width=100%
Here is the code of my header
<header class="masthead">
<canvas id="c" height="100%" width="100%"></canvas>
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="site-heading">
<h1>My website</h1>
<span class="subheading">Etudiant ingénieur <br> Artificial Intelligence</span>
</div>
</div>
</div>
</div>
</header>
header.masthead {
margin-bottom: 30px;
background: no-repeat center center;
background-color: #868e96;
background-attachment: scroll;
position: relative;
background-size: cover;
}
header.masthead .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #212529;
opacity: 0.5;
}
header.masthead .page-heading,
header.masthead .post-heading,
header.masthead .site-heading {
padding: 100px 0 50px;
color: white;
}
@media only screen and (min-width: 768px) {
header.masthead .page-heading,
header.masthead .post-heading,
header.masthead .site-heading {
padding: 50px 0;
}
}
header.masthead .page-heading,
header.masthead .site-heading {
text-align: center;
}
So I would like to resize the canvas I showed you before when I resize the window and be at the size of the banner.
Thanks for your advice, i'm pretty sure it is easy to manage.
I finaly fixed it.
I did this on my script written in javascript
var canvas = document.querySelector('c');
fitToContainer(canvas);
function fitToContainer(canvas){
c.style.width ='100%';
c.style.height='100%';
c.width = c.offsetWidth;
c.height = c.offsetHeight;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.