title: CSS : Positioning background gradient with fixed attachment at bottom right corner
body: <p>I'm stuck on a CSS problem.</p>
  
  <p>I would like to get a CSS stripe as background of my page like i did <a href="http://jsfiddle.net/wk5px7kr/" rel="nofollow noreferrer">here</a>, except that i want the stripe to be located on the bottom right corner of the page.</p>
  
  <p>Moreover i want it to be a fixed background attachment.</p>
  
  <p>I tried what is suggested here : <a href="https://stackoverflow.com/questions/7729652/how-to-position-background-image-in-bottom-right-corner-css">How to position background image in bottom right corner? (CSS)</a> but it seems to work only for background images and not for background gradients.</p>
  
  <p>I tried changing offsets in the gradient definition but it's still relative to the top left corner, and the result would differ if the window size changes.</p>
  
  <p>Here's my current code :</p>
  
  <pre><code>body
  {
      background: linear-gradient(
          150deg,
          rgba(180,214,14,0.0) ,
          rgba(180,214,14,0.0) 70px,
          rgba(180,214,14,0.4) 80px,
          rgba(152,197,10,0.5) 150px,
          rgba(0,0,0,0.4) 151px,
          rgba(0,0,0,0) 160px
      ), no-repeat 0 0 !important;
  
      background-attachment: fixed !important;    
      /* background-position: 80% 80% !important; */
      background-repeat: no-repeat !important;
  }
  </code></pre>
  
  <p>Any advice is welcomed !</p>