htmlcssbackground-imagebackground-attachment

Background-attachment:fixed equivalent for IMGs

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.

Here's my codepen:

https://codepen.io/julianapong/pen/vewmzw

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;
}
<div class="bg_fixed" style=
     "background-image:url('https://i.imgur.com/KEMR0bJ.jpg')">
       bg_fixed
</div>

<div class="img_absolute"><img src="https://i.imgur.com/KEMR0bJ.jpg" /><span >img_absolute</span></div>

<div class="img_fixed_container"><img class="img_fixed" src="https://i.imgur.com/KEMR0bJ.jpg" /><span >img_fixed</span></div>

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?

Solution 
  • .img_fixed {
  position: fixed;
  width: 33vw;
  height: 100vh;
  z-index: -1;
  right: 0;
  transform: perspective(0px);
  /* added */
}

.img_fixed_container {
  border: 1px solid red;
  width: 33vw;
  height: 100vh;
  right: 0;
  overflow: hidden;
  /* added */
  position: absolute;
  clip: rect(0, auto, auto, 0);
}

    Code Snippet Demonstration:

    body {
  height: 2000px;
  padding: 0;
  margin: 0;
}

* {
  box-sizing: border-box;
}

.bg_fixed {
  float: left;
  display: inline-block;
  width: 33vw;
  height: 100vh;
  background-attachment: fixed;
  background-size: contain;
  background-repeat: no-repeat;
}

.img_absolute {
  width: 33vw;
  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;
  transform: perspective(0px);
  /* added */
}

.img_fixed_container {
  border: 1px solid red;
  width: 33vw;
  height: 100vh;
  right: 0;
  overflow: hidden;
  /* added */
  position: absolute;
  clip: rect(0, auto, auto, 0);
}
    <div class="bg_fixed" style="background-image:url('https://placehold.it/500x700')">
  bg_fixed
</div>

<div class="img_absolute"><img src="https://placehold.it/500x700" /><span>img_absolute</span></div>

<div class="img_fixed_container"><img class="img_fixed" src="https://placehold.it/500x700" /><span>img_fixed</span></div>