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