Question about z index on this code

HTML-CSS
#1

Hello I have researched the z index but still cannot figure out the stacking order of this code. There is the z index of -1 and then there is the background color and 2 background images. I am not sure how they stack on each other. Thank you for your help.

The code looks like this:

body::before {
content: “”;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: -1;
background: var(–darkblue);
background-image: linear-gradient (
115deg,
rgba(58, 58, 158, 0.8),
rgba(136, 136, 206, 0.7)),
url(images/image.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}

#2

They don’t. The z-index refers to other objects, not to attributes WITHIN the same object.

1 Like
#3

Don’t really understand your specific question. As a rule, when 2 elements occupy the same position the last one to be rendered goes on top except for when you put that element’s position to static. By using the z-index you can guarantee that the element with the highest z-index appears on top.

If that’s not what you’re interested in then sorry :sweat_smile:

#4

Thank you for reply.
So in this case, what does the z index refer to?
I am still confused. Why is it used in this code?
Thanks again.

#5

Thank you for your reply.
In the example above, which is the element with the highest z-index?

Sorry I am still new to coding and trying to understand how the code in the example works.

#6

The z-index tells the object if it is in the same position as another object, which should be on top → or more precisely in which order (higher z-index = above those with a lower z-index).
For example, if you have a navigation-bar that moves with the page (fixed-top), you want it to be above all other objects on the page. So you might give it a high z-index.

As in this example… well no idea where you got this code from. And I would need to look up myself, what z-index -1 does.

#7

I assume it’s the form example project (codepen).

  1. It’s on the body ::before pseudo-element, not having the negative z-index puts the element (overlay/image) on top of the form. As it says in the CSS it is basically an alternative to doing this on the body.
body {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-white);
  margin: 0;
  background: var(--color-darkblue);
  background-image: linear-gradient(
      115deg,
      rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)
    ),
    url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

  1. The background property allows for multiple layers, i.e. a color overlay using a linear-gradient on top of the image (MDN: using multiple backgrounds).

  2. The background color set before the background-image/linear-gradient is just a fall-back, if you set it to say red and re-run the page you can see it flash briefly before the background-image CSS takes effect.

#8

Wow, I get it now thanks so much!!!

One more question if that is ok. On the example from the link (MDN: using multiple backgrounds) they put the url first and then the linear gradient. I tried switching that with my code example but the linear gradient disappears and it only shows the image. Is that because the image is too large?

Thanks again. That was a very clear explanation.

#9

Unless the image has transparency (an alpha channel) it will cover up anything below it. The two images used firefox.png and bubbles.png have transparency.

Usually, with a color overlay on top of an image, you use the rgba function and give the colors some transparency (in the MDN example the color is the background and the images can overlay it because they have transparency).

#10

Thank you again. I understand now.
I really appreciate you taking the time to answer my questions.