background attachment:fixed how to make the image "not full screen"?

Hey I am trying the one thing my friend want me to do but I am still new in this. I was trying to do the parallax effect on image with js but it just didn't work so I settled with the backgroud attachment - fixed but there is still a problem. The section is divided on left and right half - one half is image and the other text (and there are three rows of that). I want the image to stay fixed when scrolling, it works of course but when I set the background attachment the image get large - full screen. I want in to stay the same width 50% as it was before nothing seems to work.

HTML

<div class="photos-wrap">
  <div class="left">
    <div class="popis">
      <div class="container">
        <h2><a href="#">budova</a></h2>
        <p>
          Quis autem vel eum iure reprehenderit qui in ea voluptate velit
          esse quam nihil molestiae consequatur, vel illum qui dolorem eum
          fugiat quo voluptas nulla pariatur? Nulla turpis magna, cursus sit
          amet, suscipit a, interdum id, felis.
        </p>
      </div>
    </div>
  </div>
  <div class="right">
    <div class="pic1"></div>
  </div>
</div>

<div class="photos-wrap">
  <div class="left">
    <div class="pic2"></div>
  </div>
  <div class="right">
    <div class="popis">
      <div class="container">
        <a href="#">
          <h2><a href="#">interiér</a></h2>
          <p>
            Quis autem vel eum iure reprehenderit qui in ea voluptate velit
            esse quam nihil molestiae consequatur, vel illum qui dolorem eum
            fugiat quo voluptas nulla pariatur? Nulla turpis magna, cursus
            sit amet, suscipit a, interdum id, felis.
          </p>
        </a>
      </div>
    </div>
  </div>

  <div class="left">
    <div class="popis">
      <div class="container">
        <h2><a href="#">studia</a></h2>
        <p>
          Quis autem vel eum iure reprehenderit qui in ea voluptate velit
          esse quam nihil molestiae consequatur, vel illum qui dolorem eum
          fugiat quo voluptas nulla pariatur? Nulla turpis magna, cursus sit
          amet, suscipit a, interdum id, felis.
        </p>
      </div>
    </div>
  </div>
  <div class="right">
    <div class="pic3"></div>
  </div>
</div>

and CSS

    .photos-wrap {
  display: flex;
  flex-wrap: wrap;
}
.left {
  flex: 50%;
}
.right {
  flex: 50%;
}
.left h2,
.right h2 {
  text-transform: uppercase;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 4px;
  line-height: 1rem;
}
.left h2 a,
.right h2 a {
  text-decoration: none;
  color: #111;
}
.left h2 a:hover,
.right h2 a:hover {
  color: #5b5b5b;
}
.popis p {
  color: #000;
  line-height: 2.1rem;
  margin-top: 3.3rem;
}
.popis {
  padding: 5.7rem;
}
.left,
.right {
  background-color: #f2f4f4;
}
.pic1,
.pic2,
.pic3 {
  background-size: cover;
  background-position: center center;
  height: 440px;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.pic1 {
  background-image: url("../img/building.jpg");
}
.pic2 {
  background-image: url("../img/restaurant.jpg");
}
.pic3 {
  background-image: url("../img/studio.jpg");
}

Changing:

.pic1,
.pic2,
.pic3 {
  background-size: cover;
  background-position: center center;
...

to:

.pic1,
.pic2,
.pic3 {
  background-size: 50% auto;
  background-position: center right;
...

.pic2 {
  background-image: url("../img/restaurant.jpg");
  background-position: center left;
}

Could be one solution to fix your issue.