I have found a js background and now I would like to have this background on all my php files.
The problem is that html code goes either under js or behind it. How can I solve this?
JS file:
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width">
<title>StarField</title>
<style>
* { margin:0; padding:0; }
html, body { width:100%; height:100%; }
canvas { height:10%; width:100%; }
</style>
</head>
<body>
<canvas></canvas>
<script type = "text/javascript">
const Star = function(x, y, z) {
this.x = x; this.y = y; this.z = z;
this.size = 25;
};
var context = document.querySelector("canvas").getContext("2d");
var height = document.documentElement.clientHeight;
var width = document.documentElement.clientWidth;
var stars = new Array();
var max_depth = 7500;
for(let index = 0; index < 200; index ++) stars[index] = new Star(Math.random() * width, Math.random() * height, index * (max_depth / 200));
function loop() {
window.requestAnimationFrame(loop);
height = document.documentElement.clientHeight;
width = document.documentElement.clientWidth;
context.canvas.height = height;
context.canvas.width = width;
context.fillStyle = "#000000";
context.fillRect(0, 0, width, height);
for (let index = stars.length - 1; index > -1; index --) {
let star = stars[index];
star.z -= 5;
if (star.z < 0) {
stars.push(stars.splice(index, 1)[0]);
star.z = max_depth;
continue;
}
let translate_x = width * 0.5;
let translate_y = height * 0.5;
let field_of_view = (height + width) * 0.5;
let star_x = (star.x - translate_x) / (star.z / field_of_view) + translate_x;
let star_y = (star.y - translate_y) / (star.z / field_of_view) + translate_y;
let scale = field_of_view / (field_of_view + star.z);
let color = Math.floor(scale * 256);
context.fillStyle = "rgb(" + color + "," + color + "," + color + ")";
context.fillRect(star_x, star_y, star.size * scale, star.size * scale);
}
}
loop();
</script>
</body>
</html>
Another Php file where I included js:
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="feedback.css">
<script src="https://kit.fontawesome.com/74d89d956b.js" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feedback</title>
</head>
<body>
<?php include "navbar.php" ?>
<?php include "background.php" ?>
<div class="title">
<h1>Thank you for being here!All suggestions are welcome.</h1>
</div>
<div class = "container">
<div class="star">
<input type = "radio" name="rate" id="rate-5">
<label for="rate-5" class="fa fa-star"></label>
<input type = "radio" name="rate" id="rate-4">
<label for="rate-4"class="fa fa-star"></label>
<input type = "radio" name="rate" id="rate-3">
<label for="rate-3"class="fa fa-star"></label>
<input type = "radio" name="rate" id="rate-2">
<label for="rate-2"class="fa fa-star"></label>
<input type = "radio" name="rate" id="rate-1">
<label for="rate-1"class="fa fa-star"></label>
<form action = "feedbackform.php" method="post">
<header></header>
<div class="textarea">
<textarea name="suggestion" cols="30" placeholder="What's your opinion about my cv?"></textarea>
</div>
<div class="btn">
<button type="submit">Post</button>
</div>
</form>
</div>
</div>
</form>
</body>
</html>
Css for Php file:
.title{
text-align: center;
}
.title
{
text-transform: uppercase;
background-image: linear-gradient(
-225deg,
#231557 90%,
#ff1361 67%,
#fff800 100%
);
background-size: auto auto;
background-clip:border-box;
background-size:20% auto;
color:#fff;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color:transparent;
animation:textclip 2s linear infinite;
}
@keyframes textclip {
to {
background-position: 520% center;
}
}
.container{
text-align: center;
width: 390px;
height: 350px;
margin-top: 250px;
margin-left:750px;
background-color: rgb(26, 24, 24);
border: 1px solid #231557;
display: flex;
align-items: center;
justify-content: center;
border-radius: 25px;
}
body{
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
overflow: auto;
}
.container > .star input{
display: none;
}
.star label{
font-size: 30px;
float: right;
padding: 15px;
color:gray;
transition: width 2s;
margin-top: -20px;
}
input:not(:checked) ~ label:hover,
input:not(:checked) ~ label:hover ~ label{
color:yellow;
}
input:checked ~ label{
color:yellow;
}
input#rate-5:checked ~label{
color:#fe7;
text-shadow: 0px 0px 10px rgb(255, 255, 2);
}
.textarea textarea:focus{
border-color: #444;
}
#rate-1:checked ~ form header:before{
content: "Bleah";
}
#rate-2:checked ~ form header:before{
content: "Nope";
}
#rate-3:checked ~ form header:before{
content: "Ok ";
}
#rate-4:checked ~ form header:before{
content: "Awesome ";
}
#rate-5:checked ~ form header:before{
content: "Magnificent ";
}
input:checked ~ form{
display: block;
}
form header{
margin-left: 5px;
margin-top: 50px;
font-size:large;
color:yellow;
text-align: center;
transition: all 0.2s ease;
text-transform:uppercase;
}
form .textarea{
margin-top: 5px;
margin-left: 25px;
}
form .textarea textarea{
resize: none;
margin-top: 20px;
margin-left: -30px;
background:#BEBEBE;
color:white;
resize: none !important;
height: 50px;
width: 300px;
}
.btn{
margin-top: 10px;
margin-left: -2px;
width: 100%;
}
.btn button{
width: 310px;
height: 30px;
background-color:#BEBEBE;
text-transform: uppercase;
font-style: italic;
cursor: pointer;
transition: ease 1s;
}
.btn button:hover{
background-color: rgb(129, 118, 118);
}
Advertisement
Answer
At the moment the cavas which ‘paints’ the stars has default positioning. In this case therefore it comes before the main HTML.
If you want it as a background covering the whole viewport then a couple of things have to change:
- the height needs to go to 100%
- the positioning needs to be set at fixed (fixed in the viewport starting at the top left corner) and the z-index lowered so it’s below the subsequent HTML.
In the background.php file change the style of the canvas to:
canvas { height:100%; width:100%; position: fixed; top: 0; left: 0; z-index: -1;}