title: How do I overlay a gradient background over an existing background with CSS?
body: <p>I am trying to overlay a white-black linear gradient to an existing image. I have it set up like below; however, only the gradient layer is showing. Can someone point out where I went wrong?</p>
  
  <p>JS Fiddle: <a href="http://jsfiddle.net/6nJJD/" rel="nofollow">http://jsfiddle.net/6nJJD/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;hello&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>div {
      background:linear-gradient(to bottom, #ffffff 0%, #000000 100%), url("http://us.123rf.com/400wm/400/400/adroach/adroach1210/adroach121000001/15602757-flower-and-bird-ornaments-retro-tile-repeat-as-many-times-as-you-like.jpg") repeat #eae7de;
      color:#544a46;
      font:62.5%/1.6 Helvetica, Arial, Sans-serif;
      height:500px;
      width:500px
  }
  </code></pre>