Parallax Image Band

import ParallaxImageBand from "./index.jsx";
import { parallaxImageBand } from "../demo-data.js";
import styles from "./demo.module.css";

export default function ParallaxImageBandDemo() {
  return (
    <div className={styles.page}>
      <div className={styles.spacer} />
      <ParallaxImageBand {...parallaxImageBand} />
      <div className={styles.spacer} />
    </div>
  );
}

import styles from "./styles.module.css";

export default function ParallaxImageBand({ image, sectionHeight = "75vh", bandHeight = "50vh" }) {
  return (
    <section className={styles.section} style={{ height: sectionHeight }}>
      <div
        className={styles.band}
        style={{
          height: bandHeight,
          backgroundImage: `url(${image})`,
        }}
      />
    </section>
  );
}

.page {
  background: #fff;
}

.spacer {
  height: 80vh;
}

.section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.band {
  width: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

@media (min-width: 768px) {
  .band {
    background-size: cover;
    background-attachment: fixed;
  }
}