Survey Form - Build a Survey Form

HTML-CSS
1

Tell us what’s happening:

In css i don’t know to add a background image from the internet or from my doc. to my project can you please help me show me step by step how to do it?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, inital-scale=1.0">
    <title>HAIR SALON</title>
    <link href="styles.css" rel="stylesheet"/>
    </head>
    <body>
      <div id="survey">
        <main>
          <h1 id="title">HAIR SALON SURVEY</h1>
          <P id="description">Please fill out this form to help us improve our services</p>
          <form id="survey-form">
            <fieldset>
              <label for="name" id="name-label">Enter Your Name:<input id="name" name="name" type="text" placeholder="Name" required/><label>
                <label for="email" id="email-label" >Enter Your Email:<input id="email" name="email" type="email" placeholder="Email" required/></label>
                <label for="number" id="number-label">Enter Your Age:<input id="number" name="number" type="number" min="12" max="50" placeholder="Age" required/></label>
                </fieldset>
    
                <fieldset>
                  <legned>DO you like our way of handling custmors</legned>
                  <label><input id="yes" type="radio" value="buttons" name="handling-custmors" class="inline" checked/>yes</label>
                  <label><input id="no" type="radio" value="buttons" name="handling-custmors" class="inline" checked/>No</label>
                  </fieldset>
                  
                  <fieldset>
                  <label>What do you our best hair style we do?</label>
                  <select id="dropdown">
                    <option value="">(select one)</option>
                    <option value="1">pastera</option>
                    <option value="2">filps</option>
                    <option value="3">waves</option>
                    <option value="4">flower</option>
                    <option value="5">kuterter</option>
                    <option  value="6">cask</option>
                  </select>
                  </fieldset>

                  <fieldset>
                    <label> Please write your suggestion and asetayate for us to improve our serive <textarea></textarea>
                  </label>
                  </fieldset>
    
              
            </form>
          </main>
        </div>
      </body
</html>


/* file: styles.css */
body {
background-image: 
font-family: 
}

.div {
  background-color: lightblue;
  opacity: 0.8;
}

Your browser information:

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

Challenge Information:

Survey Form - Build a Survey Form

2

Hello @saykimelat !
When dealing with the background-image property, you have to specify the URL function, which is where you’ll place the path/link to your image.

3

If your project files are local and you want to do this locally:

First, you need to download the image and put it inside your project folder.

For example, if your project folder structure is like this:

my_project/
      index.html
      styles.css
      images/
            background-image.jpg

Then, the CSS rule should be:

body {
    background-image: url(./images/background-image.jpg);
}

If your project files are on freecodecamp or codepen.io :

If the image is on the internet, you can get the image link by right click on the image and select “Copy Image Link” or “Copy Image Address” (depend on your browser).

If the image is on your computer, you can upload it to a 3rd party side like imgur.com for example, then get the image link like above.

Then, you can use the copied image link in your CSS to set the background image.

4

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