Need some code explained for Survey Form Project

Hi Everyone.

Here is my project for the Survey Form:
https://codepen.io/Statusunquo/pen/jObYGGX

There is a bit of code in there that fixes the background in place and allows the front part (form) to scroll up and down over it. I found it on a website that I can’t remember now.

This is the code:
html {
background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Rembrandt_Harmensz._van_Rijn_146.jpg/800px-Rembrandt_Harmensz._van_Rijn_146.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

  1. Can somebody maybe explain to me line by line what the code does? I can’t figure it out. I get the gist of “background: url(picturepath)” attribute. For the rest I am at a loss.

  2. Why is the HTML selector used?

This is my first post on these forums. Sorry if I said/did something dumb.

The background shorthand property can set multiply background-* properties in a single declaration. It can get a bit hard to read sometimes.

One “trick” you can use is in the developer tools (F12) any shorthand property will have the option to be twirled open and you can see all the properties it is setting. See if you can match the properties in the list and figure out what properties are being set in the shorthand property.

properties-list

Setting it on the body should work the same, it shouldn’t really matter if you set it on the html or body.

1 Like