Survey Form - Certification Project

HTML-CSS
6

Set position property as absolute if you want to float the element on the parent element

position: absolute;

now set the width and height for the element as you want
e.g

width: 100%; /* or as much you want*/
height: 100%;

after that you can set left, right / top, bottom properties for the element
these properties will work to position the element

top: 0; /* or as much space you want want from the top of parent element*/
left: 0; /* or as much space you want want from the left of parent element*/


Setting both left and right properties at same time will also effect on the width of element

Setting both bottom and top properties at same time will also effect on the height of element

body::before {
  content: '';
  background-size: cover;
  background-attachment: fixed;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* now you have to set the background for this element */
  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);
}

now this element can cover the whole area of body element and cause to cover the child elements too, like form
there is a property z-index will help to solve the issue
e.g

z-index: 0;/* or set it -1 to send the element backward to the parent element*/