title: Header position:sticky background-color issue
body: <p>The background of the page is a <code>linear-gradient</code> and the headers have <code>position: sticky</code>. As the page gets scrolled down the header is overlapping the image with its background being transparent but I want the header background to have the same <code>linear-gradient</code> scheme as that of the page. Thanks in advance</p>
  
  <p>Current - 
  <a href="https://i.stack.imgur.com/BPUBq.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BPUBq.jpg" alt="enter image description here"></a></p>
  
  <p>Expected - 
  <a href="https://i.stack.imgur.com/qO9Mr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qO9Mr.jpg" alt="enter image description here"></a></p>
  
  <p>code - <a href="https://jsfiddle.net/wveufyn2/3/" rel="nofollow noreferrer">https://jsfiddle.net/wveufyn2/3/</a></p>
  
  <p><strong>[EDIT]</strong>
  We cant add the same <code>linear-gradient</code> to the header as its out of sync with the overall color scheme.</p>
  
  <p><a href="https://i.stack.imgur.com/SwZjh.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SwZjh.jpg" alt="enter image description here"></a></p>