title: Transparent gradient for top and bottom of background image css
body: <p>Is it possible to place transparent gradients over both the top and the bottom of a background image? At the moment I can only find it being done on one or the other.</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Tried by putting 2  with in the area that the background image is being applied then used two classes(one the reverse of the other to try and create the desired effect but it didn't quite workout. I'd also like it if possible if it didn't affect any other content and it's positioning within the section it is being applied.</p>
  
  <p>CSS</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>HTML(Basic)</p>
  
  <pre><code>&lt;div id="photo-place-holder"&gt;
      &lt;div class="picture-gradient2"&gt;&lt;/div&gt;
  
      enter code here
  
      &lt;div&gt;
          &lt;p&gt;Text&lt;/p&gt;
          &lt;p&gt;More Text&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="search-bar2"&gt;
          &lt;form class="form-wrapper2 searchbar2"&gt;
              &lt;table id="search-table" cellpadding="0" cellspacing="0"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;input type="text" placeholder="Search for activities and places" required /&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;button type="submit"&gt;&lt;img src="Logos/search_white_48px.png" height="28px" width="28px" /&gt;&lt;/button&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;div id="search-categories"&gt;&lt;/div&gt;
      &lt;div id="photo-details"&gt;&lt;/div&gt;
      &lt;div class="picture-gradient2"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>