Background Image doesn't cover entire webpage

Question

As the title says, my background image doesn't cover the entire page. I've been messing around with various settings with no luck.

Here are the links to CSS and HTML content:

https://cs.iupui.edu/~jweilham/n341/background.html

https://cs.iupui.edu/~jweilham/n341/background.css

Answer 1

Add your background inside body tag

html, body {
    font-family: "Trebuchet MS", sans-serif;
    margin: 50px;
    background: url("clouds.png");
}

It will solve your problem.

Answer 2

If I am understanding correctyle, the issue is that when you scroll down, the image does not cover the rest of the page. You can fix this very easily. On your css file, just replace position: absolute with position: fixed .

#animatedBackground {
   position: fixed;
}

Answer 3

The issue is div#animatedBackground is not containing the rest of the html

Put all html tags inside the div id ='animatedBackground'

<div id="animatedBackground">
     // All other including div#accordion,fieldset,form
</div>