Stellar Parallax to run on desktop, static image on mobile device

My website is using Stellar.js to create a parallax effect on a number of images that span the width of the users screen. Everything is working nicely on desktop across all browsers of tested. The problem is on iOS or generally mobile devices. My iPad currently shows a blank space where the parallax should be. I have read about ways to get the parallax effect to work on iOS - but it seems to have a big impact on performance. So, I would prefer if I could keep the parallax effect on desktop - and replace the parallax effect with a centered static image with the same position/dimensions for mobile devices. Anyone able to help me with how to achieve this? I saw a post on how to disable Stellar on mobile devices - but this still does not replace the parallax image with a static image instead.

MY CSS FILE
/* Separator About - Parallax Section */
.sep {
        background-attachment: fixed!important;
        background-position: 50% 0!important;
        background-repeat: no-repeat!important;
        width: 100%!important;
        height: 180px!important;
        position: relative!important;
        -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

}
.about {
background-image: url(../img/about-sep.jpg);

MY HTML FILE
<! -- ABOUT SEPARATOR -->
        
 
    <div class="sep about" data-stellar-background-ratio="0.5"></div>
        </div>
    </div>


        <script src="assets/js/jquery.stellar.min.js"></script>

<script>
                        
                $(function(){
                        $.stellar({
                                horizontalScrolling: false,
                                verticalOffset: 40
                        });
                });
                </script>
</body>

via Chebli Mohamed