Canvas en fond d'une page HTML

Sujet résolu

23 mai 2018 à 17:12:33

Bonjour !

Voici mon code:

<!DOCTYPE html>
<html>
<head>
	<title>Accueil</title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<link href="accueil.css" rel="stylesheet" type="text/css"/>
	<canvas id="mon_canvas" style="position: absolute; z-index: 1"> </canvas>
        <script type="text/javascript" src="accueil.js"></script>
</head>

<body>

	

<a id="2P" href="balle.html">1 Player Mode</a> 




</body>
</html>

Comme vous pouvez le voir j'ai placé un bouton sur cette page HTML. Cependant, le canvas que j'ai déclaré se trouve au dessus du bouton, je ne peux donc pas cliquer dessus. Est-ce possible de placer le canvas "derrière" le reste de la page ?

Merci pour votre aide !

-
Edité par Amaterasuu 23 mai 2018 à 18:07:46

philiga

23 mai 2018 à 17:23:35

Bonjour,

Oui, mais:

1ère chose: si le JS peut être dans le <head>, par contre ton élément <canvas> doit être dans <body> comme tout élément HTML.
Ensuite, ton id #2P ne peut fonctionner: interdit de commencer par un chiffre ; tu peux mettre P2 par contre.
Enfin, il faut utiliser z-index pour spécifier la hiérarchie sur l'axe Z et il faut pour cela que les éléments visés soient positionnés (par position:relative;,s'ils ne sont pas positionnés par ailleurs en absolute ou autre). Donc:
```
#P2{
  z-index:2;
  position:relative;
}
```

"La Vérité doit être dite, le monde dût-il en voler en éclats" (J. G. Fichte)

Amaterasuu

23 mai 2018 à 18:07:13

Bonjour philiga,

En effet, de la sorte j'ai le bouton au dessus du canvas.

Je te remercie pour ces précieux conseils, je ne savais pas qu'on devait placer le canvas dans le body, bon maintenant je le sais !