Fond d'écran Html en Java

Salut tu peux faire un truc comme ca ! 

<!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>

 tu voulais dire javascript plutot que java :-)

A+

re

cela dit je te conseille plutôt de mettre une vidéo en background ,moins lourd sur l UC  et pas besoin de canvas ! qui risque de te poser des problèmes pour ajouter du contenu si tu ne maîtrise pas bien son utilisation !

un truc comme ça

<!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;
    }
    /*  option bouton
    #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>
        A toi de trouver la bonne Video
      </h1>
      <h2>
        Bon courage
      </h2>
       <!--  option bouton play pause
       <button id="btnVideo" onclick="playAndPause()">Pause II</button>
       -->
    </div>
  </body>
  <!--option bouton play pause

    <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>

 A toi de l adapter a tes besoin ce n est qu un exemple ! 

PS: ne laisse pas les liens vers les vidéo je ne vais pas les laisser longtemps en ligne   c est juste pour l exemple télécharge les si tu veux !

a+

salut

il faut que tu utilise la propriété css z-index: pour placer les élément sur différent plan plus la valeur est élevé plus l élément est au dessus! c est le principe de L' ordre d'empilement des éléments sauf si la position de l élément  déclaré est

position : static;

en clair
z-index:2  sera au dessus de  z-index:1 et  z-index:3  au dessus des 2 autre ect ect ! mais on peux aussi mettre des z-index: negatif 

petite page pour debuter simplement   qui va te faire comprendre visuellement l utilisation de cette propriete  z-index:

regarde comme le canvas était déclare  position: absolute; j ai  juste ajouté

 z-index:-999;  

sur le css du canvas  et rajoute la div texte sur mon premier exemple et le texte est au dessus

-999 permet d être a peu près sur que tout sera au dessus du 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>un texte </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>

a+