0

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.

Matthias
  • 170
  • 15
  • Please extract just enough of your code to show the issue and put it into a snippet direct in your question see https://stackoverflow.com/help/minimal-reproducible-example – A Haworth Nov 06 '21 at 07:19

1 Answers1

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).

A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • Your solution was excellent, however I did have to add the 'z-index: -1' property to the before layer in order to have the content still appear. – Matthias Nov 06 '21 at 09:41
  • Thanks for spotting, that’s the problem with creating an absolutely minimal example! In this case I didn’t bother to put in text in the body. – A Haworth Nov 06 '21 at 09:43