Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

Hi, I’m trying to do a background overlay on top of my body but when i set the position to fixed, my page stops scrolling and i can’t move below. When i remove the fixed positioning, the overlay is only on some part of my page that is if i set the height to 100vh. When i scroll, the overlay stops.

Your code so far

<!-- file: index.html -->
<html>
  <head>
    <title>Movie Lovers Survey Form</title>
    <meta charset= "utf-8"/>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body>
   <div> <h1 id="title">Movie Lovers Survey Form</h1>
    <p id="description">Thank you for taking the time to help us improve our platform</p>
    <form id="survey-form">
      <fieldset>
        <label for="name" id="name-label"> Name <input type="text" required id="name" name="name" placeholder="Enter your name"></input></label>
        <label for="email" id="email-label"> Email <input type="email" required id="email" name="email"  placeholder="Enter your email"></input></label>
        <label for="number" id="number-label"> Age <input type="number"  id="number" name="number" min="13" max="35"  placeholder="Age"></input></label>
        <label> What is your best movie Genre?  <select id="dropdown" required ><option value="0">Choose One</option>
          <option value="Comedy">Comedy</option>
        <option value="Action">Action</option>
        <option value="Romance">Romance</option>
        <option value="Horror">Horror</option>
        </select></label>
      </fieldset>
      <fieldset>
        <p>Which of these movie stars would you love to take a pic with?</p>
        <label> Jason Statham <input type="radio" id="Jason" value="Jason" name="hollywood"></input></label>
        <label> Ryan Reynolds <input type="radio" id="ryan" value="ryan" name="hollywood"></input></label>
        <label> Scarlett Johansson <input type="radio" id="scarlett" value="scarlett" name="hollywood"></input></label>

        <label> Which of these do you prefer?  <select id="dropdown" required ><option value="0">Choose One</option>
          <option value="Series">Series</option>
        <option value="Sitcom">Sitcom</option>
        <option value="Franchise">Franchise</option>
        </select></label>
      </fieldset>
      <fieldset>
        <p>Which of these movies have you watched? (Check all that apply)</p>
        <label> M3GAN <input type="checkbox"></input id="megan" value="megan"></label>
        <label> Hidden Strike <input type="checkbox" id="hidden" value="hidden"></input></label>
        <label> Barbie <input type="checkbox" id="barbie" value="barbie"></input></label>
         <label> The Little Mermaid <input type="checkbox" id="little" value="little"></input></label>
          <label> Oppenheimer <input type="checkbox" id="oppenheimer" value="oppenheimer"></input></label>

   <p>Which of these movie stars would you love to eat with?</p>
        <label> Tom Cruise <input type="radio" id="Tom" value="Tom" name="hollywood2"></input></label>
        <label> Zoe Saldana <input type="radio" id="Zoe" value="Zoe" name="hollywood2"></input></label>
        <label> Chris Evans <input type="radio" id="Chris" value="Chris" name="hollywood2"></input></label>

          <label><textarea rows="4" cols="30"></textarea></label>
      </fieldset>
      <input type="submit" id="submit"></input>
    </form>
    </div>
  </body>
</html>

/* file: styles.css */
body{
  background-image: url(https://www.movieloversmontana.com/wp-content/uploads/2020/04/Movie-Lovers-Logo-Square.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  color: white;
  width: 100%;
  height: 100vh;
  
}
div{
  background-color: rgb(80,80,80,0.8);
  position: fixed;
	top: 0;
	bottom: 0;
		left: 0;
	right: 0;
  


}

form{
  width: 60vh;
  margin: 0 auto;
}

h1, #description{
  color: white;
  text-align: center;
}
input{
  display: block;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

you can do what you are doing, but if you give fixed positioning to a div that contains the rest of your page, it will not scroll. Maybe you are trying to do something too complex for this, but you could use the overflow property with fixed, or you could make your body purple and use some padding to have white on the borders

2 Likes