<!--

Based on a Forum question answer only:

https://www.sitepoint.com/community/t/how-to-put-a-background-on-a-flipbook-cover/411493/4

-->
<div class="wrap">
  <input type="checkbox" id="checkbox-page0">
  <input type="checkbox" id="checkbox-page1">
  <input type="checkbox" id="checkbox-page2">
  <input type="checkbox" id="checkbox-page3">
  <input type="checkbox" id="checkbox-page4">

  <div class="book">

    <div class="coverpage page" id="page0">
      <div class="front-page">
        <h1>My Story Book<br> <span>Click here to get started</span></h1>
        <label class="next" for="checkbox-page0"></label>
      </div>
      <div class="back-page frontispiece">
        <h2>Table of Contents</h2>
        <ol class="contents">
          <li>Page 1</li>
          <li><label for="checkbox-page1">Page 2</label></li>
          <li><label for="checkbox-page1">Page 3</label></li>
          <li><label for="checkbox-page2">Page 4</label></li>
          <li><label for="checkbox-page2">Page 5</label></li>
          <li><label for="checkbox-page3">Page 6</label></li>

        </ol>
        <label class="prev" for="checkbox-page0">Close Book</label>
      </div>
    </div>

    <div class="page" id="page1">
      <div class="front-page">
        <div class="story">
          <h2>The Story Begins</h2>
          <img class="side-img" src="https://picsum.photos/id/12/300/300" alt="pic">
          <p>Permanence of the stars astonishment ship of the imagination prime number shores of the cosmic ocean great turbulent clouds? Euclid tendrils of gossamer clouds hearts of the stars tingling of the spine extraordinary claims require extraordinary evidence Tunguska event. Take root and flourish Euclid vanquish the impossible another world with pretty stories for which there's little good evidence the only home we've ever known. Courage of our questions network of wormholes kindling the energy hidden in matter two ghostly white figures in coveralls and helmets are softly dancing from which we spring two ghostly white figures in coveralls.</p>
        </div>
        <p class="num">1</p>
        <label class="next" for="checkbox-page1">Next</label>
        <div class="curl curlright"></div>
      </div>
      <div class="back-page">
        <div class="story">
          <h2>Page 2</h2>
          <p>As a patch of light star stuff harvesting star light extraordinary claims require extraordinary evidence are creatures of the cosmos culture hundreds of thousands. Finite but unbounded venture encyclopaedia galactica circumnavigated Jean-François Champollion venture? Two ghostly white figures in coveralls and helmets are softly dancing a very small stage in a vast cosmic arena laws of physics network of wormholes courage of our questions Sea of Tranquility? Stirred by starlight citizens of distant epochs concept of the number one Sea of Tranquility tendrils of gossamer clouds vastness is bearable only through love and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>
        </div>
        <label class="prev" for="checkbox-page1">Prev</label>
        <div class="curl"></div>
        <p class="num">2</p>
      </div>
    </div>

    <div class="page" id="page2">
      <div class="front-page">
        <div class="story">

          <h2>Page 3 </h2>
          <p>Worldlets billions upon billions paroxysm of global death descended from astronomers rich in mystery Sea of Tranquility. Something incredible is waiting to be known preserve and cherish that pale blue dot invent the universe cosmic ocean gathered by gravity Tunguska event. Two ghostly white figures in coveralls and helmets are softly dancing with pretty stories for which there's little good evidence a very small stage in a vast cosmic arena vastness is bearable only through love how far away encyclopaedia galactica and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>
        </div>
        <p class="num">3</p>
        <label class="next" for="checkbox-page2">Next</label>
        <div class="curl curlright"></div>
      </div>

      <div class="back-page">
        <div class="story">
          <h2>Page 4</h2>
          <p>Encyclopaedia galactica rich in heavy atoms Apollonius of Perga the only home we've ever known inconspicuous motes of rock and gas colonies. A very small stage in a vast cosmic arena two ghostly white figures in coveralls and helmets are softly dancing laws of physics qui dolorem ipsum quia dolor sit amet another world totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>
        </div>

        <p class="num">4</p>
        <label class="prev" for="checkbox-page2"><b>Prev</b> <span> TOC</span></label>
        <div class="curl"></div>
      </div>
    </div>

    <div class="page" id="page3">
      <div class="front-page">
        <div class="story">
          <h2>Page 5</h2>
          <p>Gathered by gravity finite but unbounded made in the interiors of collapsing stars Flatland the ash of stellar alchemy explorations? Sea of Tranquility trillion are creatures of the cosmos at the edge of forever rich in mystery as a patch of light. Hundreds of thousands citizens of distant epochs extraordinary claims require extraordinary evidence Apollonius of Perga Orion's sword citizens of distant epochs. The carbon in our apple pies a very small stage in a vast cosmic arena invent the universe extraordinary claims require extraordinary evidence great turbulent clouds brain is the seed of intelligence and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>
        </div>
        <p class="num">5</p>
        <label class="next" for="checkbox-page3">Next</label>
        <div class="curl curlright"></div>
      </div>

      <div class="back-page">
        <div class="story">
          <h2>Page 6</h2>
          <p>Take root and flourish hearts of the stars billions upon billions circumnavigated radio telescope cosmic ocean. From which we spring concept of the number one birth paroxysm of global death tendrils of gossamer clouds two ghostly white figures in coveralls and helmets are softly dancing. Star stuff harvesting star light the ash of stellar alchemy another world a still more glorious dawn awaits permanence of the stars of brilliant syntheses and billions upon billions upon billions upon billions upon billions upon billions upon billions.</p>
        </div>
        <p class="num">6</p>
        <label class="prev" for="checkbox-page3"><b>Prev</b> <span> TOC</span></label>
        <div class="curl"></div>
      </div>
    </div>
    <div class="back-cover">
      <h2>End of Story</h2>
    </div>
  </div>
</div>

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: black;
}
body:before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0 0 0 0;
  background: url(https://picsum.photos/id/1067/2000/1500) no-repeat 50%;
  background-size: cover;
}

.wrap {
  margin: auto;
  display: flex;
}

.book {
  width: 43vw;
  max-width: 600px;
  min-width: 480px;
  aspect-ratio: 1;
  margin: auto;
  position: relative;
  transition-duration: 1s;
  perspective: 1500px;
}

input[type="text"] {
  background: transparent;
  border: none;
  border-bottom: 1px solid #000000;
}
input[type="checkbox"] {
  display: none;
}

.back-cover {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #82a0bc;
  border-radius: 0 15px 15px 0;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2),
    inset 0 0 20px rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center left;
}
.back-cover {
  position: relative;
  z-index: -1;
}
.page {
  position: absolute;
  background-color: white;
  left: 0;
  right: 10px;
  top: 10px;
  bottom: 10px;
  box-sizing: border-box;
  border-radius: 0 15px 15px 0;
  transform-origin: left;
  transform-style: preserve-3d;
  transition-duration: 2s;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.7);
}
.page:not(.coverpage) {
  border-right: 3px double rgba(0, 0, 0, 0.5);
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  border-bottom: 3px double rgba(0, 0, 0, 0.3);
}

.front-page {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  box-sizing: border-box;
  padding: 1rem;
  border-left: 1px dashed #ccc;
}

.back-page {
  position: absolute;
  transform: rotateY(180deg);
  width: 100%;
  height: 100%;
  z-index: 99;
  backface-visibility: hidden;
  padding: 1rem;
  border-right: 1px dashed #ccc;
}

.coverpage {
  margin: 0;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  border-radius: 0 15px 15px 0;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}
.coverpage label {
  cursor: pointer;
}
.coverpage .next {
  width: 100%;
  height: 100%;
}
.coverpage .front-page {
  background: url(https://picsum.photos/id/1016/2000/1500);
  background-size: cover;
  z-index: 5;
  margin: 0;
  border-radius: 0 15px 15px 0;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  border: none;
}
.coverpage .back-page {
  background: #82a0bc;
  border-radius: 15px 0 0 15px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2),
    inset 0 0 20px rgba(255, 255, 255, 0.8);
}
.coverpage .frontispiece {
  background: url(https://picsum.photos/id/1060/800/800);
  color: #fff;
  text-shadow: 1px 1px #268bd2;
}
.back-cover {
  background: url(https://picsum.photos/id/1060/800/800);
  background-position: 100% 0;
}
.back-cover h2 {
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  padding: 1rem;
}
.next,
.prev {
  position: absolute;
  bottom: 1em;
  cursor: pointer;
  font-weight: bold;
}

.next {
  right: 1em;
}

.prev {
  left: 1em;
}

#page0 {
  z-index: 4;
}
#page1 {
  z-index: 3;
  right: 13px;
}

#page2 {
  z-index: 2;
}

#page3 {
  z-index: 1;
}
#checkbox-page0:checked ~ .book {
  transform: translateX(50%);
  transition: transform 1.5s;
}
#checkbox-page0 ~ .book #page0 {
  transition: transform 1.5s, z-index 0s 0s;
  z-index: 5;
}

#checkbox-page0:checked ~ .book #page0 {
  transition: transform 1.5s, z-index 0.5s 0.5s;
  transform: rotateY(-180deg);
  z-index: 1;
}

#checkbox-page1:checked ~ .book #page1 {
  transition: transform 1.5s, z-index 0.5s 0.5s;
  transform: rotateY(-180deg);
  z-index: 2;
}

#checkbox-page2:checked ~ .book #page2 {
  transition: transform 1.5s, z-index 0.5s 0.5s;
  transform: rotateY(-180deg);
  z-index: 3;
}

#checkbox-page3:checked ~ .book #page3 {
  transform: rotateY(-180deg);
  z-index: 4;
}
.book p {
  margin: 0 0 1rem;
  line-height: 1.4;
}

.coverpage h1 {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  place-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
  font-size: 2rem;
  text-shadow: 2px 2px rgba(0, 0, 0, 0.9);
}

.story {
  height: calc(100% - 2rem);
  padding: 1rem;
  overflow: auto;
}
.num {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  pointer-events: none;
}
.contents {
  line-height: 1.6;
  font-size: 1.2rem;
}

#checkbox-page1:checked ~ .book #page0 {
  transition: transform 1.5s, z-index 0.5s 0.5s;
  transform: rotateY(-180deg);
  z-index: 1;
}

#checkbox-page2:checked ~ .book #page1,
#checkbox-page3:checked ~ .book #page1,
#checkbox-page4:checked ~ .book #page1 {
  transition: transform 1.5s, z-index 0.5s 0.5s;
  transform: rotateY(-180deg);
  z-index: 2;
}

#checkbox-page3:checked ~ .book #page2,
#checkbox-page4:checked ~ .book #page2 {
  transition: transform 1.5s, z-index 0.5s 0.5s;
  transform: rotateY(-180deg);
  z-index: 3;
}

#checkbox-page4:checked ~ .book #page3 {
  transform: rotateY(-180deg);
  z-index: 4;
}

.prev span {
  display: none;
}
#checkbox-page1:not(:checked) ~ .book #page2 .prev b {
  display: none;
}
#checkbox-page1:not(:checked) ~ .book #page2 .prev span {
  display: inline;
}
#checkbox-page2:not(:checked) ~ .book #page3 .prev b {
  display: none;
}
#checkbox-page2:not(:checked) ~ .book #page3 .prev span {
  display: inline;
}
.side-img {
  float: left;
  margin: 0 1rem 1rem 0;
  width: 100%;
  max-width: 200px;
  height: auto;
}

@media screen and (max-width: 980px) {
  .book {
    width: 48vw;
    max-width: none;
    min-width: 0;
    aspect-ratio: 0.8;
  }
}
@media screen and (max-width: 800px) {
  .book {
    aspect-ratio: 0.5;
  }
}

@media screen and (max-width: 720px) {
  .wrap {
    display: block;
    padding: 10px;
  }
  .book {
    width: 100%;
    aspect-ratio: auto;
  }
  .book,
  .front-page,
  .back-page,
  .page {
    transform: none !important;
    position: static !important;
    height: auto !important;
  }
  body {
    overflow: visible;
  }
  .prev,
  .next,
  .frontispiece,
  .num,
  .front-page h1 span {
    display: none;
  }
  .page,
  .front-page {
    border-radius: 0 !important;
  }
}

/* Curl */
.curl {
  width: 0px;
  height: 0px;
  position: absolute;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    225deg,
    #ffffff,
    #f3f3f3 20%,
    #bbbbbb 38%,
    #aaaaaa 44%,
    #888888 50%,
    rgba(0, 0, 0, 0.7) 50%,
    rgba(0, 0, 0, 0.4) 60%,
    rgba(0, 0, 0, 0.3)
  );
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  transition: all 0.4s ease;
  z-index: 99;
  pointer-events: none;
}
.curl:before,
.curl:after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 12%;
  bottom: 6%;
  width: 70%;
  max-width: 300px;
  max-height: 100px;
  height: 55%;
  box-shadow: 0 12px 15px rgba(0, 0, 0, 0.3);
  transform: skew(-10deg) rotate(-6deg);
}
.curl:after {
  left: auto;
  right: 6%;
  bottom: auto;
  top: 14%;
  transform: skew(-15deg) rotate(-84deg);
}
.next:hover + .curl,
.prev:hover + .curl,
.curl:hover {
  width: 20px;
  height: 20px;
}
.curlright {
  transform: rotate(284deg);
  right: 0;
  left: auto;
}