Trying to understand Body::before

HTML-CSS
1

Tell us what’s happening:

I’m analyzing and dissecting the example to understand HTML & CSS.
I have 2 questions about body::before
In example code by FCC for this challenge, I changed the body tag like below and it won’t work. I believe I put necessary codes to make it visible.

  1. how come it doesn’t work?
body::before{
   content: '';
   background: red;
   width: 100%;
   height: 100%;
}
  1. the comment in example says /* mobile friendly alternative to using background-attachment: fixed */. what does this mean?

The survey example by FCC
https://codepen.io/freeCodeCamp/pen/VPaoNP

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.16; rv:83.0) Gecko/20100101 Firefox/83.0.

Challenge: Build a Survey Form

Link to the challenge:

2

It does work, but because you have no content and ::before by default is an inline element and it has no width/height (and width/height settings for inline elements are ignored).

I guess it’s for the background to cover full screen in cases like pull-to-refresh.

1 Like
3

hello and thank you.

you wrote that my codes don’t have content and the inline element has no width and height. I think i kinda understand what you mean.

if I change my code to this below, the background color is visible.

body::before {
  content: '';
  position: fixed;
  z-index: -5;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: red;
}

position, top, left & z-index are added.
are they forcing the background color to be visible?

4

they make the element have a width and height, before it had a width and an height of 0, which made the background impossible to see

1 Like
5

what do you mean?
width and height were set to 100% from the beginning.

6

ah, you are right, it’s probably the position then, the default position of a :before it’s to the left of the element

1 Like
7

okay okay i see. Thank you!

8