Survey Form: Why is my body background applying to my head element?

Hi, I’m having a problem with the background-color of the body in line 7 of the CSS growing to envelop any text outside of the body. Here, it is being applied to the h1 and p elements in the head. Ignoring unrelated code problems, why might this be?
Thanks

You should include your raw code, not a picture.

<DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>freeCodeCamp Survey Form</title>
     <h1 id="title">freeCodeCamp Survey Form</h1>  
     <p id="description">Thank you for taking the time to help us improve the platform</p>
  </head>
  <body>
    <div>
      <form id="survey-form">
        <fieldset>
        <label for="name">Name
          <input id="name" type="text" class="textbox" required placeholder="Enter your name" />
        </label
        <label for="email">Email
          <input id="email" type="email" class="textbox" required placeholder="Enter your email" />
        </label>
        <label for="number">Age (optional)
          <input id="number" type="number" class="textbox" required placeholder="Age" />
        </label>
        </fieldset>
        <label for="dropdown">Which option best describes your current role?
          <select id="dropdown">
            <option>Select an option</option>
            <option>test2</option>
          </select>
        </label>
        <fieldset>
          <label for="definitely">Definitely
            <input id="definitely" type="radio" name="recommend" />
          </label>
          <label for="probably-not">Probably not
            <input id="probably-not" type="radio" name="recommend" />
          </label>
        </fieldset>
        <fieldset>
          <legend>What would you like to see improved? (Check all that apply)</legend>
            <input id="front-end" type="checkbox" name="improve" value="front-end" class="inline" />
            <label for="front-end">Front-end Projects</label>
            <input id="back-end" type="checkbox" name="improve" value="back-end" class="inline" />
            <label for="back-end">Back-end Projects</label>
            <input id="data-visual" type="checkbox" name="improve" value="data-visual" class="inline" />
            <label for="data-visual">Data Visualization</label>
        </fieldset>
        <label for="comment">Any comments or suggestions?
          <textarea id="comment"></textarea>
        </label>
        <button id="submit">
          <label for="submit">Submit</label>
        </button>
      </form>
    </div>
  </body>  



html {
  background: URL(https://res.cloudinary.com/grand-canyon-university/image/fetch/w_750,h_564,c_fill,g_faces,q_auto,f_auto/https://www.gcu.edu/sites/default/files/images/articles/ed7bc32442e6d9f14f5a4dc56d1bd1ae655f5241.jpg) no-repeat center;
  background-size: cover;
  padding: 3em;
}
h1 {
  text-align: center;
}
body {
  background-color: rgba(50, 150, 150, 85%);
  padding: 40px;
  margin: 0 auto;
  Border-radius: 8px;
  Border: 20px blue ;
  max-width: 600px;
}
label {
  display: block;
}
fieldset {
  border: none;
  padding: 1.5rem;
  font-size: 20px;
}
.textbox {
  height: 3em;
  width: 100%;
  display: block;
}
.inline {
  width: unset;
}

Thank you, I have replied with the code.

The head element is for invisible things such as meta, style, title, and link.

Other than that, it should go to the body element.

You can create a new div element if you want to separate the h1 and p elements from the background picture and adjust your background color to the necessary element.

If you target the body for the background, it will affect all of the parts of the text.

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