Full screen animated GIF-CodePudding

I need a page that displays only an animated GIF. Can you point out the reason it's not working? This is asp.net and this page is a web form.

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>You Passed!</title>

    <style type="text/css">

        html, body {
          margin:0;
          height:100%;
          overflow:hidden;
        }

         .bg-container {
            background-image: url("https://readnquiz.com/images/ani_confetti.gif");
            width:100%;
            height:100%;
         }

    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div >
      
        </div>
    </form>
</body>
</html>

CodePudding user response：

Use position absolute, background position cover, and viewport height units (vh).

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.bg-container {
  position: absolute;
  top: 0px;
  left: 0px;
  background-image: url("https://readnquiz.com/images/ani_confetti.gif");
  width: 100%;
  height: 100vh;
  background-size: cover;
}

<form id="form1" runat="server">
  <div >

  </div>
</form>