How can the bg-image size be adjusted according to the scale of the image?

I am trying to build a parallax-website but I'm running into problems when it comes to adjusting the size of the image.
My goal is to have the image in the background (obviously) and scroll over it.

To have the second layer in the foreground, I need to specify the height of the "gap" until the second layer starts scrolling over the image. If I understand it correctly, that's the value min-height: X; of the .bg-img1 (etc.) in my code.

Of course I can simply enter a number of pixels, let's say 600, and always have the distance of 600px. But what I would like to archieve is that the height is scaling according to scale of the bg-image. Otherwise I will have a tiny image with lots of white space on smaller devices.

Some of my code:

.bgimg-1, .bgimg-2, .bgimg-3 {
  position: relative;
  opacity: 0.65;
  background-attachment: fixed;
  background-position: center;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-size: 100% auto;
  background-repeat: no-repeat;


  }
  .bgimg-1 {
    background-image: url("images/viive_10.jpg");
    min-height: 600px;
    width: 100%;
  }

  .bgimg-2 {
    background-image: url("images/viive_26.jpg");
    min-height: 600px;
    width: 100%;
  }

  .bgimg-3 {
    background-image: url("images/viive_24.jpg");
    min-height: 600px;
    width: 100%;
  }

Solution

you can test width background-size:cover; or background-size:content; here you have the difference.

https://css-tricks.com/almanac/properties/b/background-size/