HTML Wallpaper in Java
SolvedSorestudent8 -
Hello/Evening,
I need to create a site for SNT and I have a problem,
I have a piece of Java code in my HTML that I would like to push to the background and enlarge to make it a background.
Could you please help me or find an alternative?
Thank you in advance.
PS: Here is the preview (and the numbers are scrolling)
And here is the code.
<center><canvas style="max-width: 100%; height:auto; position: absolute; z-index: -1; transform: scale(1.2);"></canvas></center> <script> var canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var letters = 'ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ'; letters = letters.split(''); var fontSize = 10, columns = canvas.width / fontSize; var drops = []; for (var i = 0; i < columns; i++) { drops[i] = 1; } function draw() { ctx.fillStyle = 'rgba(0, 0, 0, .1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < drops.length; i++) { var text = letters[Math.floor(Math.random() * letters.length)]; ctx.fillStyle = '#0f0'; ctx.fillText(text, i * fontSize, drops[i] * fontSize); drops[i]++ if (drops[i] * fontSize > canvas.height && Math.random() > .95) { drops[i] = 0; } } } setInterval(draw, 33); </script>3 answers
Hello, can you do something like this!
<!DOCTYPE html> <html> <head> <title> RAD ZONE Webcreation </title> <meta charset="utf-8"> <style type="text/css"> html, body { width:100%; height:100%; padding:0px; margin:0px; overflow: hidden; background-attachment: fixed } #projector { position: absolute; top: 0px; left: 0px; width:100%; height:100%; } </style> </head> <body> <canvas id="projector"> Your browser does not support the Canvas element. </canvas> <script> var canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var letters = 'ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ'; letters = letters.split(''); var fontSize = 10, columns = canvas.width / fontSize; var drops = []; for (var i = 0; i < columns; i++) { drops[i] = 1; } function draw() { ctx.fillStyle = 'rgba(0, 0, 0, .1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < drops.length; i++) { var text = letters[Math.floor(Math.random() * letters.length)]; ctx.fillStyle = '#0f0'; ctx.fillText(text, i * fontSize, drops[i] * fontSize); drops[i]++; if (drops[i] * fontSize > canvas.height && Math.random() > .95) { drops[i] = 0; } } } setInterval(draw, 33); </script> </body> </html> You meant JavaScript rather than Java :-)
See you later
there
that said, I recommend that you put a video in the background instead, it's lighter on the CPU and you won't need a canvas! which might cause you problems when adding content if you don't fully master its use!
something like this
<!DOCTYPE html> <html> <head> <title> RAD ZONE Webcreation </title> <meta charset="utf-8"> <style type="text/css"> #background-video { height: 100vh; width: 100vw; object-fit: cover; position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: -1; } h1, h2{ color: white; font-family: Georgia, serif; font-weight: bold; text-align: center; } h1 { font-size: 6rem; margin-top: 30vh; } h2 { font-size: 3rem; } /* button option #btnVideo { color: #8dffa2; font-size: 1.5rem; background: 0; border: 0; margin-left: 50%; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-weight: bold; transform: translateX(-50%); }*/ </style> </head> <body> <video id="background-video" autoplay="" loop="" muted=""> <source src="http://radservebeer.free.fr/videomatrix/matrix.m4v" type="video/mp4"> <source src="http://radservebeer.free.fr/videomatrix/matrix.webm" type="video/webm"> </video> <div class="contenu"> <h1> It's up to you to find the right Video </h1> <h2> Good luck </h2> <!-- play pause button option <button id="btnVideo" onclick="playAndPause()">Pause II</button> --> </div> </body> <!--play pause button option <script> var video = document.getElementById("background-video"); var btn = document.getElementById("btnVideo"); function playAndPause () { if (video.paused) { video.play(); btn.innerHTML = "Pause II"; } else { video.pause(); btn.innerHTML = "Play ▶"; } } </script> */--> </html> It's up to you to adapt it to your needs, this is just an example!
PS: don't leave the links to the videos, I won't keep them online for long, it's just for the example, download them if you want!
see you+
Hello,
thank you very much for your help, I managed to fill my page with JavaScript but I still can't get it to move to the background because I want to make it a sort of background for my page.
But thanks anyway.
PS: I chose to make a background in JavaScript (I made a mistake in the previous message) because I made one on another page (I'm creating a site that links to other pages) and I wanted to diversify.
And thanks again
hi
you need to use the css property z-index: to position elements on different layers; the higher the value, the more the element is on top! that's the principle of the stacking order of elements unless the position of the element declared is
position: static;
in short,
z-index:2 will be above z-index:1 and z-index:3 will be above the other two, etc. but we can also set negative z-index values
a small page to start simply that will help you visually understand the use of this property z-index:
notice how the canvas is declared position: absolute; I just added
z-index:-999;
to the canvas css and added the text div to my first example, and the text is on top
-999 ensures that everything will be above the canvas!
<!DOCTYPE html> <html> <head> <title> RAD ZONE Webcreation </title> <meta charset="utf-8"> <style type="text/css"> html, body { width:100%; height:100%; padding:0px; margin:0px; overflow: hidden; background-attachment: fixed } #projector { position: absolute; top: 0px; left: 0px; width:100%; height:100%; z-index:-999; } div.texte { color: #FFFFFF; text-align: center; } </style> </head> <body> <canvas id="projector"> Your browser does not support the Canvas element. </canvas> <div class="texte"> <h2>text here </h2> </div> <script> var canvas = document.querySelector('canvas'), ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; var letters = 'ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ'; letters = letters.split(''); var fontSize = 10, columns = canvas.width / fontSize; var drops = []; for (var i = 0; i < columns; i++) { drops[i] = 1; } function draw() { ctx.fillStyle = 'rgba(0, 0, 0, .1)'; ctx.fillRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < drops.length; i++) { var text = letters[Math.floor(Math.random() * letters.length)]; ctx.fillStyle = '#0f0'; ctx.fillText(text, i * fontSize, drops[i] * fontSize); drops[i]++ if (drops[i] * fontSize > canvas.height && Math.random() > .95) { drops[i] = 0; } } } setInterval(draw, 33); </script> </body> </html> see ya