Positioning the background image

Does anyone know how I can position the background image exactly the way I want it

What have you tried so far? Please post your code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Survey Form</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;1,200&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1 id="title">freeCodeCamp Survey Form</h1>
    <p id="description">
      Thank you for taking the time to help us improve the platform
    </p>
    <form id="survey-form">
      <label id="name-label" for="name">Name</label>
      <input
        id="name"
        type="text"
        required
        placeholder="Enter your name"
        class="block"
      />
      <label id="email-label" for="email">Email</label>
      <input
        id="email"
        type="email"
        required
        placeholder="Enter your email"
        class="block"
      />
      <label id="number-label" for="number">Age <span>(optional)</span></label>
      <input
        id="number"
        type="number"
        min=""
        max=""
        placeholder="Age"
        class="block"
      />
      <label>Which option best describes your current role? </label>
      <select id="dropdown" class="block">
        <option>Select current role</option>
        <option>Student</option>
        <option>Full Time Job</option>
        <option>Full Time Learner</option>
        <option>Prefer not to say</option>
        <option>Other</option>
      </select>

      <input type="radio" id="" name="" value="" />
      <input type="radio" id="" name="" value="" />

      <p>What is your favorite feature of freeCodeCamp?</p>
      <select class="block">
        <option>Select an option</option>
        <option>Challenges</option>
        <option>Projects</option>
        <option>Community</option>
        <option>Open Source</option>
      </select>

      <input type="checkbox" id="" name="" value="" />
      <input type="checkbox" id="" name="" value="" />
      <p>Any comments or suggestions?</p>
      <textarea
        id="textarea"
        placeholder="Enter your comment here..."
        class="block"
      ></textarea>
      <input type="submit" value="Submit" id="submit" />
    </form>
  </body>
</html>

body {
  margin: 0;
  background: #1b1b32;
  background-image: linear-gradient(
      115deg,
      rgba(58, 58, 158, 0.8),
      rgba(136, 136, 206, 0.7)
    ),
    url(https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  font-family: Poppins, sans-serif;
  color: #f3f3f3;
  padding-top: 20px;
}

#title,
#description {
  text-align: center;
}

#title {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 0;
}

#description {
  font-size: 18px;
  font-weight: 200;
  font-style: italic;
  margin: 2px auto 30px auto;
  width: 800px;
}

form {
  background-color: #1b1b32cc;
  max-width: 720px;
  margin: 0 auto;
  border-radius: 5px;
  padding: 12px 0 60px 0;
}

.block {
  width: 85%;
  display: block;
  margin: 0 auto;
  font-size: 15px;
  border-radius: 4px;
}

input.block {
  height: 35px;
  border: 0;
  padding-left: 12px;
  padding-top: 2px;
  padding-bottom: 2px;
}

select.block {
  height: 42px;
  width: 82%;
  padding-left: 7px;
}

label,
p {
  display: block;
  font-size: 18px;
  margin-top: 30px;
  margin-bottom: 10px;
  /* text-shadow: 2px 2px 2px; */
}

label {
  margin-left: 45px;
}

p {
  margin-left: 65px;
}

Not sure where you want it? But I assume you want background-attachment: fixed on the body selector.

Also, you probably want cover for the background-size so the image dimensions do not distort.

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