Background image not working with Safari browser from my phone-CodePudding

I upload my simple website, but when I checked from my phone with the safari browser, I can't see the background image on the top, I tried this and this but both didn't work.

  .header {
    padding: 10%;
    text-align: center;
    background: url("4.jpg"); 
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    
    height: 82vh;
    color: #FFFFFF;
    font-size: 2em;
    display: flex;
    align-items: center;
    flex-flow: column;
    gap: 1em;

    
  }

<header class="header">
        <h1>name surname</h1>
        <p>Front End Web Developer</p>
        <div class="arrow"><a href="#row"></a></div>
    </header>

Here is the My website. Thank you

CodePudding user response：

Background Attachments have been disabled in mobile browsers.

Change background-attachment to something like background-size: cover.

For more information:

How to replicate background-attachment fixed on iOS

From the post:

Check this comment by @PaulIrish:

Fixed-backgrounds have huge repaint cost and decimate scrolling performance, which is, I believe, why it was disabled.