i try to use background-attachment: fixed; and transform: translateZ(-300px) scale(2); it will make my image become larger Intrinsic size 1920×750 & rendered size 1440x563px (a banner size)

just wanna use my rendered size to do parallax scrolling

my html

 <div>
    <section class="hero_uniform" ref="heroUniform">
      <div class="banner_img">
        <img src="/img/banner_center.png" />
      </div>
    </section>
    <section class="cap_section" ref="capSection1">
      <div class="banner_img">
        <img src="/img/cap_banner.png" />
      </div>
    </section>
    <section class="cap_section" ref="capSection2">
      <div class="banner_img">
        <img src="/img/uniform_banner.png" />
      </div>
    </section>
  </div>

css

.hero_uniform,
.cap_section {
  perspective: 1;
  transform-style: preserve-3d;
  overflow-y: scroll;
  height: 100vh;
}

.banner_img {
  width: 100%;
  position: relative;
  overflow: hidden;
  z-index: -1;
}

.banner_img img {
  width: 100%;
}

js

<script>
export default {
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      const heroUniform = this.$refs.heroUniform;
      const capSection1 = this.$refs.capSection1;
      const capSection2 = this.$refs.capSection2;
      
      const scrollY = window.scrollY;
      
      heroUniform.style.transform = `translateY(${scrollY * 0.5}px)`;
      capSection1.style.transform = `translateY(${scrollY * 0.3}px)`;
      capSection2.style.transform = `translateY(${scrollY * 0.1}px)`;
    }
  }
}
</script>