I've created a div and placed an image on it. Currently the image goes all the way to the bottom of the page, disappearing behind the other image in a seperate div and completely hiding the footer div. I need the image to be fixed and scroll down the page but when it reaches the div with the footer I need it to stop (behind the other image). Here's the relevant code: 

CSS

```
.grass {
    height: 20px;
    width: 100%;
    background-color: #80BD01;
}

.padtb30 {
    width: 100%;
    height: 80px;
    /*vertical-align: bottom;*/
    text-align: center;
}

.buildings {
    display: block;
    margin: 0 auto;
}

.citydiv {
    /*position: fixed;*/
    height: 245px;
    width: 100%;
    background-image:url("../assets/images/sunwave-backcity.png");
    background-repeat: no-repeat;
}

}

footer {
    vertical-align: middle;
    text-align: center;
}

```

HTML

```
    <div class="citydiv"></div>
    <div class="padt120">
        <img src="~/assets/images/sunwave-about-buildings.png" alt="Sunwave Buildings" class="buildings"/>
        <!--<div class="green navbar"></div><-->
        <div class="grass"></div>
    </div>
</div>
<footer class="padtb30">
    <div class="container center">
        <span class="copyright"><small class="lightgrey-text">&copy; Copyright 2016.  All Rights Reserved.  ONEnergy Inc. <a href="http://limeadvertisinginc.com/sunwave-test/public/privacypolicy">Privacy Policy</a>
        </small></span>
    </div>
</footer>

```

And I'll attach a couple of images. One is what it should look like and the other is what it currently looks like.
[What I got:](http://i.stack.imgur.com/FTMmO.jpg)
[What I want:](http://i.stack.imgur.com/SQiH4.jpg)