safari you better work this time

assets/css/page/index.css

@@ -6,6 +6,7 @@
 	font-size: 10vh;
 	color: rgb(230, 11, 11);
 
+	z-index: 1;
 }
 
 /* ajuste le décompte pour les petits écrans*/

assets/css/template.css

@@ -19,6 +19,7 @@
 	margin-top: 40px;
 	border-radius: 15px;
 	color: black;
+	z-index: 1;
 }
 
 html {
@@ -37,25 +38,40 @@ body {
 	flex-direction: column;
 	justify-content: space-between;
 
+
+}
+
+.bg{
 	background-attachment: fixed,fixed;
+	-webkit-background-attachment: fixed,fixed;
+
 	background-color: #499135;
 	background-repeat: no-repeat, no-repeat;
 	background-size: auto,cover;
 	-webkit-background-size: auto,cover;
 	-moz-background-size: auto,cover;
 	-o-background-size: auto,cover;
+
+	position: fixed;
+	height: 100vh;
+	width: 100vh;
+
+	/* s/o coconut.jpeg */
+	z-index: -10000000;
 }
 
 
+
+
 /* papier peint pour petits écrans (smartphones) */
 @media all and (max-width: 800px) {
 
-	body{
+	.bg{
 		background-position: center center, center center;    
 		background-size: auto,100vh 100vh;
 		background-attachment: fixed,fixed;
 		-webkit-background-attachment: fixed,fixed ;
-		z-index: 0;
+
 	}
 }
 
@@ -103,6 +119,7 @@ a.linkmail:hover {
 	border-bottom: solid 2em #332806;
 
 	border-radius: 10px;
+	z-index: 1;
 }
 
 
@@ -184,6 +201,7 @@ footer {
 	padding: 50px;
 	font-size: 1rem;
 	color: black;
+	z-index: 1;
 }
 
 .footer-text-area {

structure/template.php

@@ -75,7 +75,10 @@ header("Cache-Control: no-cache, must-revalidate");
             }
             ?>
 
+
+
         </div>
+        <div class="bg" id="bg"></div>
 
         <footer>
 
@@ -127,7 +130,7 @@ header("Cache-Control: no-cache, must-revalidate");
             background = "assets/img/village.svg";
         }
 
-        document.getElementsByTagName('body')[0].style.backgroundImage = 'url(' + personnage + '),'+ 'url(\"'+background+'\")';
+        document.getElementById('bg').style.backgroundImage = 'url(' + personnage + '),'+ 'url(\"'+background+'\")';
 
 
     </script>