I recently embarked on my journey to learn web development by enrolling in a course on Udemy. Currently, I am diving into CSS3/HTML5 and have started a small project involving CSS3 - creating a web page that represents the Universe. My goal is to incorporate an animation into this page. I've encountered an issue: I want the page to fill the entire width and height without any scrolling necessary. Initially, I set the background color of the page to black and then added a 616x616 PNG image featuring white dots representing stars. However, as soon as I inserted the stars onto the page, the full width/height disappeared and scrolling became active. Why is this happening? Below is my HTML code:
<html>
<head>
<title>Earth Planet Orbiting</title>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if lt IE 9]>
<script src="bower_components/html5shiv/dist/html5shiv.js"></script>
<![endif]-->
</head>
<body id="universe">
<div id="stars"></div>
<div id="sun"></div>
<div id="earth0rbit">
<img src="images/earth.png" alt="Earth" width="130" height="125">
<div id="moon0rbit">
<div id="moon"></div>
</div>
</div>
</body>
</html>
This is my CSS code:
html, body {
height: 100%;
width: 100%;
}
#universe {
background: black;
background: -webkit-radial-gradient(#555, #000);
background: -moz-radial-gradient(#555, #000);
background: -o-radial-gradient(#555, #000);
background: radial-gradient(#555, #000);
}
#stars {
width: 100%;
height: 100%;
background-image: url('images/stars.png');
}
If I remove the lines with width and height from #stars, the scrolling feature is disabled but the star dots don't appear on the page. What can I do to fix this issue? Apologies for any language errors!