Responsive Design Survey Form Project:

HTML-CSS
1

Tell us what’s happening:

My background image won’t fully render and I have no idea why.

Your code so far

<div class="super-container">
  <h1 id="title">Survey</h1>
  <p id="description">Tell us how it's going at CodePlanet</p>
    
    <!-- beginning of the form that requests personal info-->
  
    <div class="container">
    <form id="survey-form">
      * First Name:
      <input id = "firstname" type= "text" name= "firstname" description="Inputs first name of the user"><br><br> 
      
      * Last Name:
      <input id = "lastname" type="text" name="lastname" description="Inputs last name of the user"><br><br> 
      
      * Email:
      <input id = "email" type="email" name="email" description="Inputs email address of the user"><br><br> 
      
      * Age:
      <input id="number-label" type="number" min="0" max="150" name="age" description="Inputs age of the user"><br><br> 
      
      <!--dropdown menu -->
      
      Which option best describes your current role? <select id="dropdown">
          <option value = "1">Student</option>
          <option value = "2">Full time job</option>
          <option value = "3">Part time job</option>
          <option value = "4">Prefer not to say</option>
      <option value = "5">Other</option><br><br>
      
      <!-- radio buttons -->
      
      <div id = "radio-label">
        <label for = "options">Would you recommend us to a friend?</label>
      </div>
      <div id = "radio-list">
        <ul>
          <li class = "radio">
            <label>
              <input name = "radio-buttons" value = "1" type = "radio" class = "options"/>Yes
            </label>
          </li>
          
          <li class = "radio">
            <label>
              <input name = "radio-buttons" value = "2" type = "radio" class = "options"/>Maybe
            </label>
          </li>
          
          <li class = "radio">
            <label>
              <input name = "radio-buttons" value = "3" type = "radio" class = "options"/>No
            </label>
          </li>
        </ul>
      </div>
      
      
      <!-- checkboxes -->  
    <div>
      <div>
        <p>Improvements to be made:</p>
        
        <input type = "checkbox" class = "checklist" value = "check-option"/>
        <label for = "check-option">Front-end development</label>
      </div>
      
      <input type = "checkbox" class = "checklist" value = "check-option"/>
        <label for = "check-option">Back-end development</label>
      </div>
      
      <input type = "checkbox" class = "checklist" value = "check-option"/>
        <label for = "check-option">Challenges</label>
      </div>
    
      <input type = "checkbox" class = "checklist" value = "check-option"/>
        <label for = "check-option">Forum</label>
      </div>
  
     <input type = "checkbox" class = "checklist" value = "check-option"/>
        <label for = "check-option">Open source community</label>
      </div>
    </div>
      <!-- additional info -->
      
      <p id = "more">Anything further to add?</p>
    <textarea id = "ta" rows = "4" cols = "50"></textarea><br>
    
      <input type = "submit" id = "submit" value = "Submit" name = "submit">
  </form>
  </div>
</div>

.super-container {
  background-image: url(http://cdn.wonderfulengineering.com/wp-content/forum/uploads/2014/07/universe-backgrounds-21.jpg);
}

* {
  font-family: Andale Mono, monospace;
  color: white;
}

#title {
  text-align: center;
  font-size: 25px;
  padding-top: 20px;
}

#description {
  text-align: center;
  font-size: 18px;
}

.container {
  width: 50%;
  clear: both;
  margin: auto;
  font-color: black;
  padding-top: 25px;
  padding-bottom: 10px;
}

.container input {
  width: 100%;
  clear: both;
  color: black;
}

#firstname {
  width: 50%;
  border: 1px solid black;
}

#lastname {
  width: 50%;
  border: 1px solid black;
}

#email {
  width: 50%;
  border: 1px solid black;
}

#number-label {
  width: 15%;
  border: 1px solid black;
}

select option {
  color: black;
}

#dropdown {
  border: 1px solid black;
  
}

.checklist {
  margin: auto;
}

#more {
  text-align: center;
}

#ta {
  color: black;
  margin: auto;
  display: block;
  border: 1px solid black;
}

#submit {
  width: 10%;
  color: black;
  border: 1px solid black;
  margin: auto;
  display: block;
}
2

You have a few too many closing div tags (</div>). This causes your .super-container and .container class to close earlier than expected. (The .super-container class that holds your background image closes before the document ends causing the image to not fully render)

Solution
You can remove the additional closing div tags, which are located at the “Improvements to be made:” section (I think there are 4 closing tags that should be removed here).

Alternatively, you can set the background image to body instead of the .super-container class:

body {
  background-image: url(http://cdn.wonderfulengineering.com/wp-content/forum/uploads/2014/07/universe-backgrounds-21.jpg);
}
3

I got rid of all of them and it did the trick. Thanks very much!