Survey Form - Build a Survey Form

HTML-CSS
1

The issue came in img Element:
i cant understand, how to add image for the background. I have also asked from Chat-gpt that how to add a background image. the answer was that , Use this css property “background-image: url(‘link’);” but it is not working.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="veiwport" content="width=device-width, initial-scale=1.0">

/*    Edit area     */



    <img src="/home/noneo/medium-shot-man-working-computer.jpg">



/*    Edit area     */

    <link rel="stylesheet" href="styles.css">
    <title>freeCodeCamp Survey Form</title>
  </head>
  <body>
    <main id="container">
      <header>
    <h1 id="title">freeCodeCamp Survey Form</h1>
    <p id="description">Thank you for taking the time for us improve the platform</p>
    </header>
    <form id="survey-form">
      <label for="name" id="name-label">Name<input id="name" name="name" type="text" required placeholder="Enter ypur Name"></label>
      <label for="email" id="email-label">Email<input id="email" name="name" type="email" required placeholder="Enter your Email"></label>
      <label for="number" id="number-label">Age(option)<input id="number" name="name" type="number" required placeholder="Age" min="18" max="100"></label>
    <label for="dropdown">Which option best describes your current role?
      <select name="role" id="dropdown">
        <option value="">Select current role</option>
        <option value="1">Student</option>
        <option value="2">Full Time Job</option>
        <option value="3">Full Time Learner</option>
        <option value="4">Prefer not to say</option>
        <option value="5">Other</option>
      </select>
    </label>
    <fieldset>
      <legend>Would you recommend freeCodeCamp to a friend?</legend>
      <label for="definitely"><input name="recommandation" type="radio" id="definitely" value="definitely" class="inline">Definitely</label>
      <label for="maybe"><input name="recommandation" type="radio" id="maybe" value="maybe" class="inline">Maybe</label>
      <label for="notsure"><input name="recommandation" type="radio" id="notsure" value="notsure" class="inline">Not sure</label>
    </fieldset>
    <fieldset>
      <legend>What would you like to see improved? (Check all that apply)</legend>
      <label for="front_end_projects"><input type="checkbox" id="front_end_projects" name="improvements" value="Front-end Projects">Front-end Projects</label>
      <label for="back_end_projects"><input type="checkbox" id="back_end_projects" name="improvements" value="Back-end Projects">Back-end Projects</label>
      <label for="data_visualization"><input type="checkbox" id="data_visualization" name="improvements" value="Data Visualization">Data Visualization</label>
      <label for="challenges"><input type="checkbox" id="challenges" name="improvements" value="Challenges">Challenges</label>
      <label for="open_source_community"><input type="checkbox" id="open_source_community" name="improvements" value="Open Source Community">Open Source Community</label>
      <label for="gitter_help_rooms"><input type="checkbox" id="gitter_help_rooms" name="improvements" value="Gitter Help Rooms">Gitter help rooms</label>
      <label for="videos"><input type="checkbox" id="videos" name="improvements" value="Videos">Videos</label>
      <label for="city_meetups"><input type="checkbox" id="city_meetups" name="improvements" value="City Meetups">City meetups</label>
      <label for="wiki"><input type="checkbox" id="wiki" name="improvements" value="Wiki">Wiki</label>
      <label for="forum"><input type="checkbox" id="forum" name="improvements" value="Forum">Forum</label>
      <label for="additional_courses"><input type="checkbox" id="additional_courses" name="improvements" value="Additional Courses">Additional Courses</label>
    </fieldset>
    <fieldset>
      <legend>Any comments or suggestions?</legend>
      <textarea name="comments" id="comments" rows="5" cols="50" ></textarea>
    </fieldset>
    <input id="submit" type="submit" value="Submit">
    </form>
    <main>
  </body>
</html>

/* file: styles.css */
body {
  background-image: url('');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:109.0) Gecko/20100101 Firefox/115.0

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

2

Here, you can see how to add an image as a background to your page. You can not add it from local storage, meaning to creating a link to an image stored on your PC, for example. But you can insert a url from online image stocks (many providers require only an attribution such as creating a link to the author of the image you use).

.hero-image {
  background-image: url("https://cdn.pixabay.com/photo/2017/10/31/19/05/web-design-2906159_960_720.jpg");
  background-color: #cccccc;
  width: 100%;
  height: auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

This is just an idea of adding a background image.

3

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