Place an image behind a scrollable long text

My o my, this same old trouble. Before, you continue reading that if you're in a haste, you can copy the code snippet and go find relief. And please come back to read the rest of the article, I'll be waiting 😋.

<div class='body'>
  <img src="gods_know_where" alt="a logo" class='logo'/>
  <div id="longTexts">Your very long text</div>
</div>

//css
.logo{
  height: 5rem;
  width: 5rem;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}
#longTexts{
  position:absolute;
  background: rgba(0,0,0,0.7);
  width: 30vw;
  margin: auto;
  padding: 2rem;
}

Visit my codepen to see the shortcode in action, to confirm if it is worth the copy 🤣.

If your aim is to put a logo behind a text or better still put an image behind a text where the logo or image or whatever is kept in the center and doesn't leave the screen even as you scroll! Well, I'm happy you found help.

My objective with this article isn't to teach you in detail but to better communicate the solution of positioning your long text over an image because trust me I just didn't find a good enough solution that was not only simple but straight to the point enough. Trust me my aim isn't to reinvent the wheel.

The first step is to set the image to a fixed position relative to the window, and center the image with its distance from the top and left by 50% of the screen. However, this will not really center things until you do translate.

The next step is to make the long texts div absolute so that it takes up the available space left by the image.

Voila!!!!! Bye and happy hacking.