Dégradé Transparent pour le haut et le bas de l'image d'arrière-plan css

Est-il possible de placer des dégradés transparents à la fois sur le haut et le bas d'une image de fond? Pour le moment je ne peut trouver qu'il fait sur l'un ou l'autre.

Mise à JOUR:

Essayé en mettant 2 dans la zone de l'image de fond est appliquée ensuite utilisé deux classes(l'une à l'inverse de l'autre pour essayer de créer l'effet désiré, mais il n'a pas assez d'entraînement. J'aimerais aussi, si possible, si cela n'a pas affecté de tout autre contenu et le positionnement au sein de la section dans laquelle il est appliqué.

CSS

.picture-gradient {
z-index: 1;
height: 50px;
width: auto;
position: relative;
background: -webkit-linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0)); 
background: -o-linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0)); 
background: -moz-linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0)); 
background: linear-gradient(rgba(64,64,64,1), rgba(64,64,64,0));
padding: 15px;
margin: -15px;
}
.picture-gradient2 {
z-index: 1;
height: 50px;
width: auto;
position: relative;
background: -webkit-linear-gradient(rgba(64,64,64,0), rgba(64,64,64,1)); 
background: -o-linear-gradient(rgba(64,64,64,0), rgba(64,64,64,1)); 
background: -moz-linear-gradient(rgba(64,64,64,0), rgba(64,64,64,1)); 
background: linear-gradient(rgba(64,64,64,0), rgba(64,64,64,1)); 
padding: 15px;
margin: -15px;
}

HTML(de Base)

<div id="photo-place-holder">
<div class="picture-gradient2"></div>
enter code here
<div>
<p>Text</p>
<p>More Text</p>
</div>
<div id="search-bar2">
<form class="form-wrapper2 searchbar2">
<table id="search-table" cellpadding="0" cellspacing="0">
<tr>
<td><input type="text" placeholder="Search for activities and places" required /></td>
<td><button type="submit"><img src="Logos/search_white_48px.png" height="28px" width="28px" /></button></td>
</tr>
</table>
</form>
</div>
<div id="search-categories"></div>
<div id="photo-details"></div>
<div class="picture-gradient2"></div>
</div>