title: Offsetting background while keeping it responsive
body: <p>I am trying to combine three things:</p>
  
  <ul>
  <li>Gradient background</li>
  <li>Offset background</li>
  <li>Background image</li>
  </ul>
  
  <p>I essentially want to achieve exactly what I have in my JSFiddle below, but with the gradient following no matter what size.</p>
  
  <p><a href="https://jsfiddle.net/023hqb6w/" rel="nofollow noreferrer">https://jsfiddle.net/023hqb6w/</a></p>
  
  <pre><code>background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("https://c.tadst.com/gfx/750w/sunrise-sunset-sun-calculator.jpg");
  background-size: cover;
  background-position: 50% calc(50% - 150px);
  background-repeat: no-repeat;
  </code></pre>
  
  <p>How do I do that?</p>