Question about mobile friendly alternative for background-attachment?-CodePudding

I was doing a project in fcc there they told an mobile friendly alternate to background-attachment Question #1 What is the use of ::before Question 2 What is the use of z-index?

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

CodePudding user response：

You should use a search engine for simple questions like "What is the use of z-index" the next time.

Question 1: the ::before is a so called pseudo-element. It is used to add some content before the selected element https://developer.mozilla.org/en-US/docs/Web/CSS/::before.

Question 2: the z-index is most commonly used to make elements overlap and generally an element with a higher z-index is positioned before one with a lower z-index https://developer.mozilla.org/en-US/docs/Web/CSS/z-index. To get a better understanding on how elements overlap, you should have a look at the stacking context.

Unfortunately your question is not really clear but I'm assuming that you don't really understand what is going on in your example.

When you use position fixed the element is taken out of the document-flow. This means that declarations like height: 100% width: 100% are relative to the parent. If you would use body {...} instead of body::before{...} the parent would be your html element. If you apply position: fixed to your body and take it out of the document-flow, the html will have no in-flow elements which means that the height of the html-element will be 0. Since your bodys height would be 100% of it's parents height(your html-element) it would also be 0.

That is why in your example body::before is used. This behaves like a first child of body. So the declarations height:100% and width:100% will be relative to your body-element instead of your html-element.