Survey Form - Certification Project

I’ve completed the Survey Form which is one of the five certification projects related to the Responsive Web Design course, but i would like to be much closer to the result shown in the image bellow (i’m unable to post the link , but i’ve marked with an arrow):

So what i need is this:

  1. By scrolling the vertical bar from the browser, the background image should be still or static, but conversely the form shoulb be able to move up and down as the result of the scrolling;
  2. The Background image should cover the whole page;
  3. The background color applied with the css function linear-gradient(), i think, should also cover the whole background area.

Thanks in advance!

Solution:

.your-element{
   /*To stick your background img */
   background-position: fixed;
   /* To make the background full sized */
   background-size: cover;
}

/*For the 3rd point you have to make the size of your element as much big as you want to fit the background-color */
e.g

.your-element{
   width: 100%;
   height: 100%;
/*and then your background*/
}

waiting for your reply🙂

shamrouzawana, first of all thanks for answering my post! Conversely, after applying the suggested solution, it didn´t produce the expected result.
here is the result:

  1. After setting property "background-size: cover; "

    Number 1 and 2 in the image, it shows a line passing behind the form (not sure what it is);
    Number 3 and 4 in the image, it looks like the image is repeating itself
  2. After setting property “background-position: fixed;”, nothing happened, meaning that the background image and the form still moving together.
  3. For this one, i had already in the body a width: 100% but height: 100vh, i´ve changed to 100% but even though it hasn´t produce any expected result.

i am sharing bellow the content of my css file, maybe i’m doing something wrong:

body {
  width: 100%;
  height: 100%;
  margin: 0;   
  color: #f5f6f7;
  font-family: Tahoma;
  padding: 2em 0;
  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);    
   
   background-size: cover;
   background-position: fixed;
   font-size: 18px;
   
   
}

label {
  display: block;
  margin: 0.5em 0;
}


p, h1 {
  text-align: center; 
  margin: 0.5em auto; 
}

p {
  font-style: italic;
}

form {  
  margin: 30px auto;
  width: 80%;
  max-width: 600px;
  min-width: 300px;  
  background-color: #1b1b32;  
  padding: 10px 30px 20px 30px;
}

input, textarea, select {
  width: 100%;
  margin: 10px 0 0 0;
  height: 2em;
  font-size: 1rem;
}

input[type="submit"] {
  display: block;
  background-color: #37af65;
  height: 50px;
  font-size: 1.5rem;
  border: 1px solid none;  
  margin: 10px auto;
  font-family: poppins, sans serif;
  color: white;
  width: 95%;
  
}

textarea {
  height: unset;
}

.inline {
    width: unset;
    margin: 0 0.5em 0 0;
    vertical-align: middle;
}

fieldset {
  border: 0;
}

input[type="radio"], input[type="checkbox"] {
  width: 6%;
}

It should be background-attachment: fixed

Or you can do what the example code does and create a pseudo-element on the body which you use for the image. It is mainly done so in the example for a bit better mobile support, but I’m not sure how relevant that is anymore.

Lasjorg, many thanks for your answer! Using the property:

background-attachment: fixed;

It worked well, but as you have also mentioned pseudo-element, i got curious and tried to test it out, but could not get the expected result…i’m sharing again the piece of code related to this change:

body {
  width: 100%;
  height: 100%;
  margin: 0;   
  color: #f5f6f7;
  font-family: Tahoma;
  padding: 2em 0;
  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);    
   
   /*background-size: cover;*/
   /*background-attachment: fixed;*/
   font-size: 18px;   
}
body::before {
  content: '';
  background-size: cover;
  background-attachment: fixed;
}

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*/

You can always use the dev tools to inspect the styles. I would very much recommend learning them no matter what.

shamrouzawana after testing the code example that you’ve suggested it didn´t work, please see the result bellow:

Then and to make it works, i’ve made the following changes to position, background-attachment and z-index properties like this:

position: fixed; /* allowed to move or float the form toward the background*/
z-index: -1;  /* allowed to see again the content "form" cause after setting 'position: fixed; ' it desappeared*/
background-attachment: fixed; /* I've removed cause it wasn't produce any affect */

And basically after changing the code , it stayed like this:

body::before {
    content: '';
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    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);
    z-index: -1;      
}

I also put in codepen for better judgement of yours, cause i want to know if i did it in correct way…please see here

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.