Fading top and bottom of div element - html

Question

I've been able to fade the top of a div, but I can't get the bottom to fade as well. I figured I could just reverse the css I used to fade the top but it's not working.
HTML:
<div class="container-city">
<div id="gradient-top">
<h2 style="text-align: center; padding-top: 60px;">LOCATIONS</h2>
</div>
<div id="gradient-bottom">
</div>
</div>
CSS
.container-city {
background-image: url("img/1652.png");
width: 100%;
}
#gradient-top {
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
}
#gradient-bottom {
background: -moz-linear-gradient(bottom, rgba(1, 255, 255, 255) 0%, rgba(0, 255, 255, 255) 100%);
background: -webkit-linear-gradient(bottom, rgba(1, 255, 255, 255) 0%, rgba(0, 255, 255, 255) 100%);
background: linear-gradient(to top, rgba(1, 255, 255, 255) 0%, rgba(0, 255, 255, 255) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
}
Question:
Is there an easier way to accomplish this by fading the top and bottom?
Current Result:

Answer 1

Seems like the simplest solution would be to add a linear-gradient with multiple stops to the background-image and center the title vertically and horizontally to get the effect you are looking for (you can also add percentage values to the gradient color stops to tweak how it fades). Something like the following:
.container-background {
background-image: linear-gradient(#fff, transparent, #fff), url('http://via.placeholder.com/200x800/f0f000/fff?text=');
width: 100%;
}
.container-title {
text-align: center;
margin: 0 auto;
padding: 60px 0;
}
<div class="container-background">
<h2 class="container-title">TITLE</h2>
</div>