[doomroot]

Hhmmm not sure how react helps here. I would love to see your code if you could share a gist?

[hot_gril]

I'll make one when I get home. IIRC: You'd scroll down vertically on the site, through divs with different backgrounds. The initial HTML/CSS approach was nothing special, just adjacent divs with background-image with background-size options, and I tried other tricks to no avail. The React approach was useWindowSize(), set div width to 100% or the screen width in px, set div height to (image aspect ratio) times width, set `background-size: 100% 100%` or the exact div width/height px.

[hot_gril]

Either ChatGPT has gotten better or I gave it a better prompt this time. It suggested this padding-bottom hack that sorta works but requires hardcoding aspect ratios, which I didn't want, but at least it demonstrates the layout we wanted with a Windows XP Bliss background image example:

  <style>

  .image-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 80.44%; /* h/w aspect ratio */
    background-image: url('https://d7hftxdivxxvm.cloudfront.net/?quality=80&resize_to=width&src=https%3A%2F%2Fartsy-media-uploads.s3.amazonaws.com%2F2RNK1P0BYVrSCZEy_Sd1Ew%252F3417757448_4a6bdf36ce_o.jpg&width=910');
    background-size: cover;
    background-position: center;
  }

  </style>

  <div class="image-container">hi</div>
  <div class="image-container">hi2</div>
  <div class="image-container">hi3</div>

Though it seems laggier than the React version when I resize, and this doesn't get into making the text resize to fit the divs...