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

Question

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");
}

score 2 · Accepted Answer · answered Dec 28 '20 at 10:13

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.

score 1 · Answer 2 · answered Dec 28 '20 at 10:58

The same issue was discussed here. This happens because background-attachment: fixed always sets the image to the viewport size by spec definition. There are different workarounds, including JS or doing it with CSS only. A css only approach would be to change background-size: cover to background-size: auto 50% or whatever width your image is supposed to have and then also set background-position: center right (or left if the image is on the left side). This way the image only takes up half of the viewport.

.photos-wrap {
  display: flex;
  flex-wrap: wrap;
}
.left {
  flex: 50%;
}
.right {
  flex: 50%;
}

.popis {
  padding: 5.7rem;
}

.pic1, .pic2 {
  height: 440px;
  background-size: 50% auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
    background-image: url("https://images.unsplash.com/photo-1609009835496-7121e5ade7d8?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1934&q=80");
}

.pic1 {
  background-position: center right;
}

.pic2 {
    background-position: center left;
}

<div class="photos-wrap">
  <div class="left">
    <div class="popis">
      <div class="container">
        <h2>budova</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">
          <h2>interiér</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>

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

2 Answers2