How to fixed background image without using 'css' background-attachment: fixed since it doesn't work in iPhone

Question

I am working on react app and need background image fixed. I can achieve this very quickly by using background-attachment: fixed; but it is not supporting in iPhone and in my deployment I can see the image did not show properly. following code doesn't fixed the image to background and scroll as along with other divs

css

.welcome-banner-wrapper{
 position: relative;
 width: 100%;
 height: 100vh; 
 overflow: hidden;
}

.welcome-banner-content{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../images/banner-img-06.jpg"); 
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

react

import React, { Fragment } from 'react';

const WelcomeHomeNote = () => {

    return (
        <Fragment>
            <div className="welcome-banner-wrapper">
                <div className="welcome-banner-conatiner">
                <section className="welcome-banner-content" id="messageimo" style={{backgroundImage: `url("${process.env.PUBLIC_URL + '/assets/images/banner-img-06.jpg'}")`}} > 
                </section>
                </div>
            </div>
        </Fragment>
       
    );
};

export default WelcomeHomeNote;