# Need some code explained for Survey Form Project

**URL:** <https://forum.freecodecamp.org/t/need-some-code-explained-for-survey-form-project/403867>\
**Category:** I Built This\
**Created:** [June 15, 2020, 3:40pm UTC](https://forum.freecodecamp.org/t/need-some-code-explained-for-survey-form-project/403867 "2020-06-15T15:40:49Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![StatusunquoForReal](https://avatars.discourse-cdn.com/v4/letter/s/a5b964/32.png) [@StatusunquoForReal](https://forum.freecodecamp.org/u/StatusunquoForReal)\
**Post date:** [June 15, 2020, 3:40pm UTC](https://forum.freecodecamp.org/t/need-some-code-explained-for-survey-form-project/403867/1 "2020-06-15T15:40:49Z")

</div>

Hi Everyone.

Here is my project for the Survey Form:  
[https://codepen.io/Statusunquo/pen/jObYGGX](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](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.

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [June 15, 2020, 5:37pm UTC](https://forum.freecodecamp.org/t/need-some-code-explained-for-survey-form-project/403867/2 "2020-06-15T17:37:22Z")

</div>

The [background](https://developer.mozilla.org/en-US/docs/Web/CSS/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](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_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](https://global.discourse-cdn.com/freecodecamp/original/3X/2/1/212b5524299a21bbce0390097e62f92c3c60554c.png)

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

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 1:16pm UTC](https://forum.freecodecamp.org/t/need-some-code-explained-for-survey-form-project/403867/3 "2021-06-01T13:16:01Z")

</div>

Closed on June 1, 2021, 1:16pm UTC