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:
JavaScript
x
101
101
1
<!DOCTYPE html>2
3
<html>4
5
<head>6
7
<meta name = "viewport" content = "width=device-width">8
<title>StarField</title>9
10
<style>11
12
* { margin:0; padding:0; }13
14
html, body { width:100%; height:100%; }15
16
canvas { height:10%; width:100%; }17
18
19
</style>20
21
</head>22
23
<body>24
25
<canvas></canvas>26
27
<script type = "text/javascript">28
29
const Star = function(x, y, z) {30
31
this.x = x; this.y = y; this.z = z;32
33
this.size = 25;34
35
};36
37
var context = document.querySelector("canvas").getContext("2d");38
39
var height = document.documentElement.clientHeight;40
var width = document.documentElement.clientWidth;41
42
var stars = new Array();43
44
var max_depth = 7500;45
46
for(let index = 0; index < 200; index ++) stars[index] = new Star(Math.random() * width, Math.random() * height, index * (max_depth / 200));47
48
function loop() {49
50
window.requestAnimationFrame(loop);51
52
height = document.documentElement.clientHeight;53
width = document.documentElement.clientWidth;54
55
context.canvas.height = height;56
context.canvas.width = width;57
58
context.fillStyle = "#000000";59
context.fillRect(0, 0, width, height);60
61
for (let index = stars.length - 1; index > -1; index --) {62
63
let star = stars[index];64
65
star.z -= 5;66
67
if (star.z < 0) {68
69
stars.push(stars.splice(index, 1)[0]);70
star.z = max_depth;71
continue;72
73
}74
75
let translate_x = width * 0.5;76
let translate_y = height * 0.5;77
78
let field_of_view = (height + width) * 0.5;79
80
let star_x = (star.x - translate_x) / (star.z / field_of_view) + translate_x;81
let star_y = (star.y - translate_y) / (star.z / field_of_view) + translate_y;82
83
let scale = field_of_view / (field_of_view + star.z);84
85
let color = Math.floor(scale * 256);86
87
context.fillStyle = "rgb(" + color + "," + color + "," + color + ")";88
context.fillRect(star_x, star_y, star.size * scale, star.size * scale);89
90
}91
92
}93
94
loop();95
96
</script>97
98
</body>99
100
</html>101
Another Php file where I included js:
JavaScript
1
47
47
1
!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<meta http-equiv="X-UA-Compatible" content="IE=edge">6
<link rel="stylesheet" href="feedback.css">7
<script src="https://kit.fontawesome.com/74d89d956b.js" crossorigin="anonymous"></script>8
<meta name="viewport" content="width=device-width, initial-scale=1.0">9
<title>Feedback</title>10
</head>11
<body>12
13
<?php include "navbar.php" ?> 14
<?php include "background.php" ?> 15
<div class="title">16
<h1>Thank you for being here!All suggestions are welcome.</h1>17
</div>18
19
<div class = "container">20
<div class="star">21
<input type = "radio" name="rate" id="rate-5">22
<label for="rate-5" class="fa fa-star"></label>23
<input type = "radio" name="rate" id="rate-4">24
<label for="rate-4"class="fa fa-star"></label>25
<input type = "radio" name="rate" id="rate-3">26
<label for="rate-3"class="fa fa-star"></label>27
<input type = "radio" name="rate" id="rate-2">28
<label for="rate-2"class="fa fa-star"></label>29
<input type = "radio" name="rate" id="rate-1">30
<label for="rate-1"class="fa fa-star"></label>31
32
<form action = "feedbackform.php" method="post">33
<header></header>34
<div class="textarea">35
<textarea name="suggestion" cols="30" placeholder="What's your opinion about my cv?"></textarea>36
</div>37
<div class="btn">38
<button type="submit">Post</button>39
</div>40
41
</form>42
</div>43
</div>44
</form>45
</body>46
</html>47
Css for Php file:
JavaScript
1
156
156
1
.title{2
text-align: center;3
4
}5
.title6
7
{8
text-transform: uppercase;9
background-image: linear-gradient(10
-225deg,11
#231557 90%,12
13
#ff1361 67%,14
#fff800 100%15
);16
background-size: auto auto;17
background-clip:border-box;18
background-size:20% auto;19
color:#fff;20
-webkit-text-fill-color: transparent;21
-webkit-background-clip: text;22
-webkit-text-fill-color:transparent;23
animation:textclip 2s linear infinite;24
25
26
}27
@keyframes textclip {28
to {29
background-position: 520% center;30
}31
}32
33
34
.container{35
36
text-align: center;37
width: 390px;38
height: 350px;39
margin-top: 250px;40
margin-left:750px;41
background-color: rgb(26, 24, 24);42
border: 1px solid #231557;43
display: flex;44
align-items: center;45
justify-content: center;46
border-radius: 25px;47
48
49
}50
body{51
52
position: fixed;53
top: 0px;54
left: 0px;55
width: 100vw;56
height: 100vh;57
overflow: auto;58
}59
.container > .star input{60
display: none;61
}62
63
.star label{64
font-size: 30px;65
float: right;66
padding: 15px;67
color:gray;68
transition: width 2s;69
margin-top: -20px;70
}71
72
input:not(:checked) ~ label:hover,73
input:not(:checked) ~ label:hover ~ label{74
color:yellow;75
}76
input:checked ~ label{77
color:yellow;78
}79
80
input#rate-5:checked ~label{81
color:#fe7;82
text-shadow: 0px 0px 10px rgb(255, 255, 2);83
84
}85
.textarea textarea:focus{86
border-color: #444;87
}88
89
90
#rate-1:checked ~ form header:before{91
content: "Bleah";92
}93
#rate-2:checked ~ form header:before{94
content: "Nope";95
}96
#rate-3:checked ~ form header:before{97
content: "Ok ";98
}99
#rate-4:checked ~ form header:before{100
content: "Awesome ";101
}102
#rate-5:checked ~ form header:before{103
content: "Magnificent ";104
}105
106
input:checked ~ form{107
display: block;108
}109
form header{110
margin-left: 5px;111
margin-top: 50px;112
font-size:large;113
color:yellow;114
text-align: center;115
transition: all 0.2s ease;116
text-transform:uppercase;117
}118
119
120
form .textarea{121
margin-top: 5px;122
margin-left: 25px;123
124
125
}126
form .textarea textarea{127
resize: none;128
margin-top: 20px;129
margin-left: -30px;130
background:#BEBEBE;131
color:white;132
resize: none !important;133
height: 50px;134
width: 300px;135
136
}137
138
.btn{139
margin-top: 10px;140
margin-left: -2px;141
width: 100%;142
}143
.btn button{144
width: 310px;145
height: 30px;146
background-color:#BEBEBE;147
text-transform: uppercase;148
font-style: italic;149
cursor: pointer;150
transition: ease 1s;151
}152
153
.btn button:hover{154
background-color: rgb(129, 118, 118);155
}156
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:
JavaScript
1
2
1
canvas { height:100%; width:100%; position: fixed; top: 0; left: 0; z-index: -1;}2