Survey Form - Build a Survey Form

I found an image that I want to use for my background. I know how to write the code for the image but how do I actually use the image? it’s currently on my desktop.

Or does the project want me to get fancy with css gradients and colors for my background?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Survey Form></title>
    <link rel="stylesheet" href="styles.css"/>
    <h1 id="title">freeCodeCamp Survey Form</h1>
    <p id="description">Thank you for taking the time to help is improve the platform</p>
    <form id="survey-form" method="post">
      <label class="upper" for="name-label">Name</label>
        <input id="name-label" name="name-label" type="text" placeholder="Enter your name"/>
      <label class="upper" for="email-label">Email</label>
      <input id="email-label" name="email-label" type="email" placeholder="Enter your email"/>
      <label class="upper" for="number-label">Age (optional)</label>
      <input id="number-label" name="number-label" type="number" min="5" max="120"/>
      <label for="dropdown">Which option best describes your current role?
        <select id="dropdown" name="dropdown"/>
      <option value="">Select current role</option>
      <option value="1">Full time Job</option>
      <option value="2">Full Time Learner</option>
      <option value="3">Prefer not to say</option>
      <option value="4">Other</option>
      <label>Would you recommend freeCodeCamp to a friend?</label>
      <label for="def"><input id="def" name="recommend" type="radio" value="Definitely"/> Definitely</label>
      <label for="maybe"><input id="maybe" name="recommend" type="radio" value="Maybe"/> Maybe</label>
      <label for="not_sure"><input id="not_sure" name="recommend" type="radio" value="Not Sure"/> Not Sure</label>
      <label>What is your favorite feature of free code camp?<select id="feature" name="feature">
        <option value="">Select an Option</option>
        <option value="1">Challenges</option>
        <option value="2">Projects</option>
        <option value="3">Community</option>
        <option value="4">Open Sources</option>
      <label>What would you like to see improved? (Check all that apply)</label>
      <label for="front"><input id="front" name="front" type="checkbox" value="Front-end Projects"/> Front-end Projects</label>
      <label for="back"><input id="back" name="back" type="checkbox" value="Back-end Projects"/> Back-end Projects</label>
      <label for="data"><input id="data" name="data" type="checkbox" value="Data Visualization"/> Data Visualization</label>
      <label for="challenge"><input id="challenge" name="challenge" type="checkbox" value="Challenges"/> Challenges</label>
      <label for="open"><input id="open" name="open" type="checkbox" value="Open Source Communities"/> Open Source Communities</label>
      <label for="gitter"><input id="gitter" name="gitter" type="checkbox" value="Gitter Help Rooms"/> Gitter Help Rooms</label>
      <label for="video"><input id="video" name="video" type="checkbox" value="Videos"/> Videos</label>
      <label for="city"><input id="city" name="city" type="checkbox" value="City Meetups"/> City Meetups</label>
      <label for="wiki"><input id="wiki" name="wiki" type="checkbox" value="Wiki"/> Wiki</label>
      <label for="forum"><input id="forum" name="forum" type="checkbox" value="Forum"/> Forum</label>
      <label for="course"><input id="course" name="course" type="checkbox" value="Additional Courses"/> Additional Courses</label>
      <label for="comments">Any comments or suggestions?<textarea id="comments" name="comments" rows="10" columns="30" placeholder="Enter Your Comments Here"></textarea></label>
      <input type="submit" id="submit" value="Submit"/>
/* file: styles.css */
label {
  display: block;
div {
  background-color: navy;
body {
  color: white;
  font-family: sans-serif;
  background-image: url("fcc.jpeg");

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15

Challenge: Survey Form - Build a Survey Form

Link to the challenge:



or if you have cloudinary…
or any other web space…


If you upload your image to any online hosting site, you should be able to use a link from there to insert it into your code.

I use pixabay and pexels which are free to signup and use for anyone; but there are many different ones.

Happy coding! :slight_smile:

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