Posted by: nichism Jan 22 2020, 12:58 AM
I am trying to make a video as my background. It works if I have the CSS code written in <style> </style> within my header in the HTML file. When I put it into my CSS file, it suddenly doesn't want to work. Help? I am very new to web programming.
HTML:
CODE
<!DOCTYPE html>
<html>
<head>
<title>*beep* Zone</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stuff.css">
<style>
.example{
background-color: rgb(0, 0, 0);
font-size:200%;
text-decoration:none;
color:white;
}
</style>
</head>
<body>
<video autoplay muted loop id="myVideo">
<source src="pFiles/bg2.mp4" type="video/mp4">
</video>
<p><a style="background-color: rgb(0, 0, 0);font-size:400%;text-decoration:none;color:white;"> Kansei's Page </a></p>
<p><a href="/index" style="background-color: rgb(0, 0, 0);font-size:200%;text-decoration:none;color:white;">Home Page</a></p>
<audio autoplay loop id="myMusic">
<source src="pFiles/wintertime.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
var music = document.getElementById("myMusic");
music.volume = 0.15;
</script>
<img src="https://media.giphy.com/media/fe3Rwmc2bBulG/giphy.gif">
<p><a href="https://shoppy.gg/product/3R6l0hG" style="background-color: rgb(0, 0, 0);font-size:200%;text-decoration:none;color:white;">NordVPN</a></p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
CSS:
CODE
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
/*img {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
audio {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
h1 {text-align:center;}
p {text-align:center;}
*/
Thanks for the help in advanced!
Posted by: pandy Jan 22 2020, 04:43 AM
The below bit works of you put it in a style block?
CODE
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
I don't see anything wrong with that. Is that all you have in the style sheet? Not anything above those lines?
Posted by: pandy Jan 22 2020, 05:38 AM
Or did I misunderstand? Did you mean the class you have in the style block in head works?
In that case, the position: fixed won't make the video a background and 100% height doesn't work the way you think. Sorry, I only looked at the syntax the first time since I thought it worked as you wanted if you placed it in HEAD. Do you see the video at all?