title: how to combine background image AND css gradient?
body: <p>I've searched around for over an hour without finding the correct answer before posting this, so hopefully someone can assist me. I have a div with a big image on my mainpage that is rendered like this:</p>
  
  <pre><code>&lt;div id="hero"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>It works perfectly right now, but I want to add a gradient to the left and right side of the image to fade it out into almost black, however I can't seem to get it working.</p>
  
  <p>The CSS for the hero div is:</p>
  
  <pre><code>#hero{
  background-image: url("hero.jpg");
  background-position: center center;
  background-repeat: repeat-x;
  background-color:#FFFFFF;
  width:100%;
  height:200px;
  position:relative;
  }
  </code></pre>
  
  <p>What I am trying to add is:</p>
  
  <pre><code>background: linear-gradient(to right, rgba(38, 35, 31, 0.8) 0%, rgba(65, 60, 53, 0) 50%, rgba(38, 35, 31, 0.8) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
  bottom: 0;
  content: "";
  left: 0;
  opacity: 1;
  right: 0;
  top: 0;
  transition: opacity 0.5s ease 0s;
  </code></pre>
  
  <p>However when adding it to the div, it's not working. I even tried combining the background-image and the gradient like:</p>
  
  <pre><code>background-image: url("hero.jpg"), linear-gradient(to right, rgba(38, 35, 31, 0.8) 0%, rgba(65, 60, 53, 0) 50%, rgba(38, 35, 31, 0.8) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
  </code></pre>
  
  <p>but that's just showing a white space.</p>
  
  <p>Any ideas what I'm doing wrong?</p>
  
  <p>Thank you for any hints :)</p>
  
  <p>EDIT: Note that I also have some content (buttons and text) inside the "hero" div, so it should not overlay the content, only the background image.</p>