title: Background-attachment:fixed equivalent for IMGs
body: <p>I'm trying to find a CSS-only equivalent effect of background-attachment:fixed that works with inline IMG elements.  I've tried position:fixed, but removing the image from the document flow will not work in this instance. </p>
  
  <p>Here's my codepen:</p>
  
  <p><a href="https://codepen.io/julianapong/pen/vewmzw" rel="nofollow noreferrer">https://codepen.io/julianapong/pen/vewmzw</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    height:2000px;
    padding:0;
    margin:0;
  }
  
  *{
    box-sizing:border-box;
  }
  
  .bg_fixed{
    float:left;
    display:inline-block;
    width:32vw;
    height: 100vh;
    background-attachment:fixed;
    background-size:contain;
    background-repeat:no-repeat;
  }
  
  .img_absolute{
    width:32vw;
    height:100vh;
    float:left;
    position:relative;
  }
  
  .img_absolute img{
    height:100%;
    width:100%;
    object-fit:cover;
    position:absolute;
    left:0;
    z-index:-1;
  }
  
  .img_fixed{
    position:fixed;
    width:33vw;
    height: 100vh;
    z-index:-1
    right:0;
  }
  
  .img_fixed_container{
    border:1px solid red;
     width:32vw;
    height: 100vh;
    right:0;
    overflow:hidden;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="bg_fixed" style=
       "background-image:url('https://i.imgur.com/KEMR0bJ.jpg')"&gt;
         bg_fixed
  &lt;/div&gt;
  
  &lt;div class="img_absolute"&gt;&lt;img src="https://i.imgur.com/KEMR0bJ.jpg" /&gt;&lt;span &gt;img_absolute&lt;/span&gt;&lt;/div&gt;
  
  &lt;div class="img_fixed_container"&gt;&lt;img class="img_fixed" src="https://i.imgur.com/KEMR0bJ.jpg" /&gt;&lt;span &gt;img_fixed&lt;/span&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Ideally, I'd like the img_absolute or img_fixed to scroll with the same behaviour as bg_fixed. Are there any CSS tricks that will do this?</p>