title: Background Gradient on Changing height background image
body: <p>I have a background image that is set to 100% width, depending on the screen size. This means, the height of the background image could be 100px or 800px. </p>
  
  <p>I have a gradient to make the background image slowly transform into a grey color. But because the height of the background varies, I cant figure out how to get the gradient to begin where it is needed.</p>
  
  <p>Setting a % makes it relevant to the page so doesn't work. I figure, I need to use the <code>calc()</code> function somehow. This is what i have, any ideas?</p>
  
  <pre><code>background: linear-gradient(to bottom, transparent, #ddd calc(??)), 
              #ddd url('../img/bg.jpg') no-repeat;
  </code></pre>