Issue
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 class="bg-container">
</div>
</form>
</body>
</html>
Solution
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 class="bg-container">
</div>
</form>Answered By - WillD
