0

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;
K.Z
  • 5,201
  • 25
  • 104
  • 240
  • Jup, this is till not supported. Either you unfix it for mobile (easiest as you can use `@media (pointer:coarse){}`), or you wrap it in a separate `fixed` element that scrolls with the page whose height you can control. – somethinghere Sep 01 '23 at 14:07
  • I believe you can find some solutions in [this question](https://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7). Good luck! – MentalBoolean Sep 01 '23 at 14:09
  • Does this answer your question? [Fixed background image with ios7](https://stackoverflow.com/questions/20443574/fixed-background-image-with-ios7) – MentalBoolean Sep 01 '23 at 14:10

0 Answers0