Html – Fixed Background Image – Broken on mobile

I want to build a container in my React project, that consists of a background image and text lying on top of it.

Basically, I have also built this container already some time ago (I thought). But now I have seen that on a mobile device because of the address bar the image is rescaled every time the scroll direction changes, which looks very broken.

I have already read this thread .
However, since I don’t want to set the image as background on the whole page (but only in this one container), I don’t think this solution works.

I also don’t want to use solutions like transition: height 999999s, because this would break the webpage when rotating the screen.

My code where this problem occurs looks like this:

HTML Code:

<div>
  <section>
    <h2>Container Before</h2>
    <p>SOME RANDOM TEXT</p>
  </section>
  <section className="section">
    <div className="imageContainer">
      <div className="innerContent">
        <h2>Random Text</h2>
        <p>
          Received the likewise law graceful his. Nor might set along charm
          now equal green. Pleased yet equally correct colonel not one. Say
          anxious carried compact conduct sex general nay certain. Mrs for
          recommend exquisite household eagerness preserved now. My improved
          honoured he am ecstatic quitting greatest formerly. Extended
          kindness trifling remember he confined outlived if. Assistance
          sentiments yet unpleasing say. Open they an busy they my such
          high. An active dinner wishes at unable hardly no talked on.
          Immediate him her resolving his favourite. Wished denote abroad at
          branch at. Ham followed now ecstatic use speaking exercise may
          repeated. Himself he evident oh greatly my on inhabit general
          concern. It earnest amongst he showing females so improve in
          picture. Mrs can hundred its greater account. Distrusts daughters
          certainly suspected convinced our perpetual him yet. Words did
          noise taken right state are since. You disposal strongly quitting
          his endeavor two settling him. Manners ham him hearted hundred
          expense. Get open game him what hour more part. Adapted as smiling
          of females oh me journey exposed concern. Met come add cold calm
          rose mile what. Tiled manor court at built by place fanny.
          Discretion at be an so decisively especially. Exeter itself object
          matter if on mr in. Sussex on at really
        </p>
      </div>
    </div>
  </section>
  <section>
    <h2>Container After</h2>
    <p>SOME RANDOM TEXT</p>
  </section>
</div>

CSS Code:

.section {
  background-color: black;
}

.imageContainer {
  width: 100%;
  position: relative;
  padding: 5rem 0;
  overflow: hidden;
}

.imageContainer:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url(https://img.freepik.com/free-photo/beautiful-view-greenery-bridge-forest-perfect-background_181624-17827.jpg?w=2000);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  padding: 5.4% 0;
  opacity: 0.5;
}

.innerContent {
  padding: 2rem 1.5rem;
  margin: 1rem auto;
  width: 100%;

  position: relative;
  z-index: 9;
  text-align: left;
  color: white;
  opacity: none;
}
@media screen and (min-width: 768px) {
  .innerContent {
    width: 750px;
  }
}
@media screen and (min-width: 992px) {
  .innerContent {
    padding: 2rem 10rem;
    width: 980px;
  }
}
@media screen and (min-width: 1200px) {
  .innerContent {
    width: 1170px;
  }
}
@media screen and (min-width: 1400px) {
  .innerContent {
    width: 1370px;
  }
}

Thanks in advance for any help!

Best regards,
Brian