фоновое вложение: исправлено, как сделать изображение не на весь экран?

Эй, я пытаюсь сделать то, что мой друг хочет, чтобы я сделал, но я все еще новичок в этом. Я пытался сделать эффект параллакса на изображении с помощью js, но это просто не сработало, поэтому я остановился на вложении backgroud - исправлено, но проблема все еще есть. Раздел разделен на левую и правую половины - одна половина - это изображение, а другая - текст (и их три строки). Я хочу, чтобы изображение оставалось фиксированным при прокрутке, это, конечно, работает, но когда я устанавливаю фоновое вложение, изображение становится большим - полноэкранным. Я хочу, чтобы ширина оставалась той же 50%, что и до того, как ничего не работает.

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>

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

css background parallax image-size background-attachment
person user1049069    schedule 28.12.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Изменение:

.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;
}

Может быть одним из решений, чтобы решить вашу проблему.

person Isman F.    schedule 28.12.2020

arrow_upward
1
arrow_downward

Та же проблема обсуждалась здесь. Это происходит потому, что background-attachment: fixed всегда устанавливает размер окна просмотра по определению спецификации. Существуют разные обходные пути, включая JS или использование только CSS. Подход только css состоял бы в том, чтобы изменить background-size: cover на background-size: auto 50% или любую другую ширину, которую должно иметь ваше изображение, а затем также установить background-position: center right (или оставить, если изображение находится слева). Таким образом, изображение занимает только половину области просмотра.

.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>

person marlisa    schedule 28.12.2020
comment
Точно, теперь понял! Большое спасибо! - person user1049069; 28.12.2020