0

I'm currently working on a website which has a background image on its home page. This works fine everywhere I've tested it, except on my iPad. I've Googled about a bit and other people seem to have the problem as well, but none of their solutions work for me.

Here's a video of what happens: https://file.garden/YqcddaVyGGEk7pAS/RPReplay_Final1661876702.mp4

My code is as follows:

    background-image: 
      linear-gradient(
        rgba(0, 0, 50%, 25%),
        rgba(0, 0, 50%, 25%)
      ),
      url(/assets/img/home/background.jpg);
    
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

I understand that background-image: fixed; won't work, it's just this strange scrolling behaviour that I need to fix.

I've tried removing background-image: fixed;, removing background-size: cover;, both of the previous, and converting the file to PNG, all as suggested on other posts, none of which worked. Ideally I would like a non-javascript solution if possible.

Thanks

EDIT:

Here's the HTML:

<div class="container">
  <section class="banner">
    <div class="overlay">
      <h1>Rutland Genie Tutoring</h1>
      <p>Home and Online tutoring for maths and science, based in Rutland</p>
    </div>
  </section>
  [...]
</div>

Here's my CSS:

.container > section.banner {
  padding-left: 1em;
  padding-right: 1em;
  text-align: center;
  font-size: xx-large;
  padding: 20vh;
  max-height: min-content;
  width: 100%;
  
}

.container > section.banner > .overlay {
  padding: 1em;
  border-radius: 15px;
  background-color: rgba(0, 0, 0, 0.5);
  width: fit-content;
  margin: auto;
  color: var(--home-banner-font-colour);
}
BlockyPenguin
  • 75
  • 1
  • 6

1 Answers1

-1

One of the main problems here is the fact that iOS mobile devices have errors rendering background-size:cover; along with background-attachment:fixed;.

Therefore an easy fix would be to use a media query to change the background-attachment property on mobile (screen width less than 640px):

try this in a media query

@media (max-width:640px) {
  section {
    background-attachment:initial;
  }
}
Mohamad
  • 602
  • 2
  • 5
  • 18
  • 1
    As mentioned in my post, I tried removing background size and background attachment from my CSS, but the issue still persisted. – BlockyPenguin Aug 30 '22 at 17:08
  • 1
    As some IOS devices are quite wide (1024x768 e.g. for an ordinary iPad) I can't see how this would help. – A Haworth Aug 30 '22 at 20:06
  • @A Haworth: A likely reason is this answer was the result of [plagiarism](https://en.wiktionary.org/wiki/plagiarism#Noun). It was wholesale copied from [this 2016 Stack Overflow answer](https://stackoverflow.com/questions/36686654/fixed-background-images-disappear-on-iphone-ipad/36763066#36763066). – Peter Mortensen Aug 18 '23 at 13:55