Help - Search - Members - Calendar
Full Version: Beginner CSS/HTML help with ID's and Classes
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
nichism
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! laugh.gif
pandy
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?
pandy
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?
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2020 Invision Power Services, Inc.