html - CSS: Can I fit a container to a long/overflowing image?

Question

One of my first css intensive projects, having trouble getting everything lined up how I'd want it to.

How it is and what I want to achieve

The second section is ignoring the overblown 600% image and going right after the previous container (obviously). I tried setting the .container-stars height to 600%, but that does literally nothing. Tried using px or vh units, but it messes with the SVG paths, where they ignore the absolute top: 0; and move to the middle (I imagine it's because of the height: 100% somehow, but I can't set it to specific units because then it wouldn't be responsive anymore)

When I set the .container-stars to height: 600vh

.container-stars {
  position: relative;
  width: 100vw;
  height: 100%;
  margin-top: 20%;
  background: linear-gradient(to bottom, $background 5%, white 40%, transparent 100%, $background 90%);
  .path_left {
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
    fill: $background;
  }
  .path_right {
    position: absolute;
    width: 45%;
    height: 100%;
    top: 0;
    right: 0;
    transform: scaleX(-1);
    fill: $background;
  }
  .img_stars {
    position: absolute;
    background-image: url('/img/stars-1654074_1920.jpg');
    top: 0;
    left: 0;
    width: 100%;
    height: 600%;
    repeat: repeat-y;
    z-index: -1;
  }
}

#content {
  position: relative;
  width: 100vw;
  margin-top: 0%;
  h2 {
    position: absolute;
    font-family: $primary-font;
    font-size: calc(2vw + 0.5rem);
    top: 0;
    background: green;
    display: block;
    transform: translate(0, 50%);
    color: #fff;
  }
}

<section class="container-stars">
  <svg class="path_left" width="450" height="600" viewBox="0 0 450 600">
      <path d="M 0 600 C 260 327 202 133 450 0 L 0 0"></path>
    </svg>
  <svg class="path_right" width="450" height="600" viewBox="0 0 450 600">
      <path d="M 0 600 C 260 327 202 133 450 0 L 0 0"></path>
    </svg>
  <div class="img_stars"></div>
</section>

<section id="content">
  <h2>...matter, energy, time and space came into being</h2>
</section>

question from:https://stackoverflow.com/questions/65926901/css-can-i-fit-a-container-to-a-long-overflowing-image

Answer 1

Waitting for answers