0

I have been analyzing this code which is an alternative to using background-attachment: fixed, but have some questions that I can’t seem to figure out. I have tried to find the answers online without success. Can someone please help? The code is:

body::before {
  content:”;
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -1;
  background: var(—color-darkblue);
  background-image: linear-gradient(rgba(58, 58, 158,0.8), rgba((136, 136, 206,   0.7)),url(#);background-size: cover;
  background-repeat: no-repeat;background-position: center;
}

Question 1: Does position fixed, fix the background color (dark blue) and the url image so it doesn’t move when you scroll?

Question 2: which property or properties modify the background color and / or the background-image? For example does top:0 and left: 0 modify the background color only? Does background -size modify the url(jpeg) only?

Question 3: don’t you need to add (will-change: transform;) in the code.

Thank you so much. I have been trying for the past 3 days to figure this out.

Leonardo
  • 2,439
  • 33
  • 17
  • 31
WillB
  • 27
  • 2
  • On the third question - what are you intending to transform? There are pros and cons to adding will-transform so it depends on the use case. – A Haworth Jan 12 '22 at 08:34
  • I want to scroll through the page but keep the background image fixed. I heard if you add will-change: transform to the code it creates a separate element so the browser wouldn't have to keep painting the image on the background and it would stop the image from loading slowly on the page. – WillB Jan 12 '22 at 13:13

1 Answers1

1

Question 1: Does position fixed, fix the background color (dark blue) and the url image so it doesn’t move when you scroll

Yes - that is basically the meaning of fixed.

Question 2: which property or properties modify the background color and / or the background-image? For example does top:0 and left: 0 modify the background color only? Does background -size modify the url(jpeg) only?

top and left do not (directly) modify the background. What they do is position the whole pseudo element so, indirectly, they change the position of backgroound because they have changed the position of the whole pseudo element which includes its background. background-size will affect the image.

Question 3: don’t you need to add (will-change: transform;) in the code.

I don't understand why this should be necessary since there is nothing upcoming that is being transformed. Yes the user might scroll but the system has already been given the information it needs to make a good job of keeping the background (the pseudo element) fixed.

There are in fact several possibilities for misusing will-change - it can make things worse so I would avoid it unless you are really seeing performance issues. See https://developer.mozilla.org/en-US/docs/Web/CSS/will-change for more in depth discussion of this.

Here is a snippet which shows the backgrounds remaining fixed if you scroll down.

body {
  width: 100vw;
  --color-darkblue: darkblue;
  color: white;
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: -1;
  background: var(--color-darkblue);
  background-image: linear-gradient(rgba(58, 58, 158, 0.8), rgba(136, 136, 206, 0.7)), url(https://picsum.photos/id/1015/300/300);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
<body>
  <br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line
</body>
A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • I am curious to why you changed height from height: 100% to height: 100vh. Is that a better way to code it? Also thanks so much for the answer. This was my first question on this site and I am really grateful. – WillB Jan 13 '22 at 02:32
  • Just to ensure that the pseudo element has the height of the viewport. – A Haworth Jan 13 '22 at 02:42