Design a Contact Form - Background how to cover full page

HTML-CSS
1

Tell us what’s happening:

Hi there,
I’m doing the “Design a contact form” project and I put a background-linear gradient just for fun. However, I want this gradient to cover the full page. Now it only covers the space behind the form element and then repeats itself. That’s not what I want. Can anyone help me? Thanks! Here’s my code:

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css"
    <title>Contact Form</title>
</head>

<body>
    <div class="form-container">
    <form>
        <h2>Contact us</h2>
        <label for="name">Name: </label>
            <input type="text" id="name" name="name" placeholder="John Doe" required>
        <label for="email">Email: </label>
        <input type="email" id="email" name="email" placeholder="john.doe@mail.org" required>
        <label for="message">Message: </label>
            <textarea id="message" rows="4" cols="30" placeholder="Type your message here.." name="message" required></textarea>
        <button type="submit">Submit</button>

        </form>
    </div>
</body>

</html>

/* file: styles.css */
body {
  background: linear-gradient(45deg, #005acd 10%, #0093cb 30%, #6dd7fd 50%, #bef0ff 70%,#f5ffff 90%);
}

.form-container {
  background-color: #f5ffff;
  border-radius: 5%;
  padding: 10px;
  width: 500px;
  margin: 0 auto;
}

h2 {
  text-align: center;
  color: #005acd;
}

label {
  color: #005acd;
  display: block;
  margin: 5px;
  font: bold 20px Arial;
}

input {
  display: block;
  margin: 0 auto;
  width: 20rem;
  padding: .5em;
  margin-bottom: 1em;
  border-color: #0093cb;
}

input[placeholder] {
  text-align: center;
}

textarea {
  display: block;
  margin: 0 auto;
  width: 20rem;
  padding: .5em;
  margin-bottom: 2em;
  border-color: #0093cb;
}

textarea[placeholder] {
  text-align: center;
}

button {
  display: block;
  width: 5em;
  height: 2em;
  background-color: #bef0ff;
  margin: 5px auto;
  font: bold 20px Arial;
  border-radius: 5px;
}

button:hover {
  background-color: #005acd;
  color: #f5ffff;
}

label {
  text-align: center;
  
}

Your browser information:

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

Challenge Information:

Design a Contact Form - Design a Contact Form

2

not related, but you have a syntax issue here

that’s why you have

image
image215×156 4.07 KB

anyway, for the background, the body is as high as its content, and then the background repeat for how the behaviour is implement in the browser. If you add an height to the body selector with a value like 100vh it will cover the whole screen

3

Awesome! thank you very much! :folded_hands: