JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  
    <main>
        <!-- Repeating 729 -->
    <div class="repeat729" data-center="background-position: 20% 0px;">
        <div class="callout" data-center="background-position: 20% 0px;">
            <img src="https://placekitten.com/g/200/300">
        </div>
    </div>
        <!-- Intro Section -->
        <header id="slide1" class="homeSlide">
            <div class="bcg intro" data-center="background-position: 20% 0px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target="#slide1" >
                <div class="hsContainer">
                    <p>content</p>
                </div>
            </div>
        </header>
        <!-- Overview Section -->
        <section id="slide2" class="homeSlide">
            <div class="bcg overview"  data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target="#slide2" >
                <div class="hsContainer">
                    <div class="hsContent">
                        <div class="whiteband">
                            <h1>Refresh</h1>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Capital Improvements Section -->
        <section id="slide3" class="homeSlide">
            <div class="bcg capimprovements">
                <div class="hsContainer">
                    <div class="hsContent">
                        <div class="whiteband">
                            <h1>text</h1>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Spacer Section -->
        <section id="spacer1">
            <div class="bcg spacer greybg">
                <div class="hsContainer">
                    <div class="hsContent">
                        <div class="whiteband">
                            <h1>Re-energize</h1>
                        </div>
                    </div>
         ...

CSS

.repeat729 {
    width: 26%;
    position: absolute;
    right: 0;
    z-index: 1000;
    background-image: url('http://smmcnyc.com/work/hmp/729-html/img/729-rightside.png');
    background-repeat: repeat-y;
    height: 300%;
    background-size: contain;
    top: 58px;
}

.callout {
	position: absolute;
}

.callout img {
    width: 80%;
    margin-left: -62%;
    margin-top: 26%;
}
.bcg {
	background-position: center center;
	background-repeat: no-repeat;
	webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
	height: 100%;
	width: 100%;
	background-repeat: no-repeat;
	background-position: bottom center;
}

#slide1 .bcg {
    width: 100%;
    height: 100vh;
    padding: 100px 0;
    text-align: center;
    color: #fff;
    background-image: url('http://smmcnyc.com/work/hmp/729-html/img/bg1.jpg');
    background-color: #000;
    background-attachment: fixed;
}

#slide2 .bcg {
    background-image: url('http://smmcnyc.com/work/hmp/729-html/img/bg2.jpg');
    height: 120vh;
    background-position-y: 22%;
    background-attachment: fixed;
}

#slide3 .bcg {
	background-image: url('http://smmcnyc.com/work/hmp/729-html/img/bg3.jpg');
	height: 100vh;
	background-attachment: fixed;
}

.hsContainer {
	width: 100%;
	height: 100%;
	overflow: visible;
	position: relative;
}

.whiteband {
	padding: 3% 20%;
	background-color: rgba(255,255,255,0.8);
}

.greybg {
	background-image: url('http://smmcnyc.com/work/hmp/729-html/img/spacerbg.jpg');
	background-attachment: fixed;
}

#spacer1 .greybg {
    height: 60vh;
}