I recently uploaded my simple website, but I encountered an issue when viewing it on my phone using the Safari browser. The background image at the top is not displaying properly. I attempted solutions from this and this, but unfortunately, none of them resolved the problem.
.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>If you'd like to check out my website, you can do so by visiting My website. Thank you!