Why isn't my website showing my images?

Question

I'm trying to make an animated footer. I'm trying to put an image in my code but it's not showing.

edit I tried editing the code as per the instructions but the image still doesn't display. My css file is in the same folder as wave.png, but wave.png is in another folder within the same folder. I'm not sure if this is the problem. I can also show my entire code if necessary

footer .wave {
  position: absolute;
  top: -100px;
  left: 0;
  width: 100%;
  height: 100px;
  background: #f00 url(wave.png);
  background-size: 1000px 100px;
}

<footer>
  <div class="waves">
    <div class="wave" id="wave1"></div>
    <div class="wave" id="wave2"></div>
    <div class="wave" id="wave3"></div>
    <div class="wave" id="wave4"></div>
  </div>
</footer>

Answer 1

edit

footer .wave

to

.waves .wave

delete

background: #f00 url(wave.png);

Add to

background-color: #f00;
background-image: url(wave.png);

Make sure your wave.png is in the same directory/folder as your css file, if your css file is in (for example) the css/ folder and the images are in the /images folder you have to change the url to

background-image: url(../images/wave.png);