How to make background image stay while text scrolls? (Safari)

Question

Before you try to close: I know that there are similar questions and answers out there, however none of these solutions work for me, rather just locking scrolling all together. This could possibly be because I am using a website template from w3schools.

I am making a website for a school project where I would like the background to be a picture of tree leaves. Unfortunately, this image doesn't seem to cover the full page, causing it to repeat downwards. This is an issue.

I have used background-attachment: fixed; to solve this issue on chrome (for windows), but have discovered that safari does not support this.

The website's code can be accessed: here. (Control + U for page source)

tldr; I need to find an equivalent to background-attachment: fixed; for safari that works for my website.

TIP: You will have to test the page in safari to see the issue.

Answer 1

You can't keep the background on the actual body in this case because of the Safari attachment-fixed problem as you point out.

You can however put the background on a pseudo element and then use the 'ordinary' CSS fixed position so it stays in place even as you scroll down.

Here's a basic example:

body {
  width: 100vw;
  height: 200vh;
  margin: 0;
  padding: 0;
}

body::before {
  content: '';
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-image: url("https://hdwallsource.com/img/2014/5/green-background-21874-22427-hd-wallpapers.jpg");
  background-size: cover;
  z-index: -1; /* added */
}

Note: the background size is set to cover so the whole viewport is covered whatever its aspect ratio (some of the img may get cropped either top/bottom or at the sides so that it fits).