How to have background image fill the screen so there is no white space

Literally tried everything :frowning:


CSS code:

html {
	height: 100%;
	margin: 0px;
	padding: 0px;

body {
	background-image: url("");

	/* Full height */
	height: 100%;
	/* Center and scale the image nicely */
	background-position: center center;

	background-repeat: no-repeat;
	background-size: cover;

	color: #fff;
	text-align: center;

	font-family: Arial, Helvetica, sans-serif;

h1 {
	margin-bottom: 0;

#survey-form {
	box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.4);
	max-width: 550px;
	padding: 30px 20px;
	margin: 40px auto;
	border-radius: 10px;
	/* text-align: left; */
	background-color: rgb(0, 0, 0, 1);
	font-family: Arial, Helvetica, sans-serif;

.form-control {
	text-align: left;
	margin-bottom: 20px;

.form-control input[type="checkbox"] {
	display: inline-block;
	width: auto;

.form-control label {
	display: block; /* acts like a <p> tag takes up a new line and entire width */
	margin-bottom: 7px;

.form-control input,
.form-control select,
.form-control textarea {
	font-family: inherit;
	border: 1px solid #777;
	border-radius: 2px;
	padding: 7px;
	display: block;
	width: 100%;

* {
	box-sizing: border-box; /* ensures the input boxe are inside the form container */

button {
	background-color: grey;
	display: block;
	padding: 10px;
	font-family: inherit;
	width: 100px;
	font-size: 16px;
	border-radius: 2px;

HTML code:

<!DOCTYPE html>
			<link rel="stylesheet" type="text/css" href="stylesheet.css">

		<script src=""></script>
		<h1 id="title">Survey Form</h1>
		<p id="description">Kindly fill in the survey form below</p>

		<form id="survey-form">
			<div class="form-control">
			<label id="name-label">Name</label>
				placeholder="Enter your name"
			/><br />
		<div class="form-control">
			<label id="email-label">Email</label>
				placeholder="Enter your email"
			/><br />
		<div class="form-control">
			<label id="number-label">Age</label>
		<div class="form-control">
			<label id='label-gender'>Gender</label>
			<input type="radio" id="male" name="gender" value="male" />
			<label for="male">Male</label><br />
			<input type="radio" id="female" name="gender" value="female" />
			<label for="female">Female</label><br />
			<div class="form-control">
			<label id='actor'>
				Who is your favourite actor starring in a Thriller film?
			<select id="dropdown" name="Select current situation">
				<option value="actor1">Christian Bale</option>
				<option value="actor2">Leonardo DeCaprio</option>
				<option value="actor3">Jake Gyllenhaal</option>
				<option value="actor4">Matthew McConaughey</option>
				<option value="actor5">Hugh Jackman</option>
				<option value="actor6">Other</option>
			<div class ="form-control">
			<label id="favourite">Select your favourite Thriller Movies (check all that apply)</label>
			<input type="checkbox" id="movie1" name="movie1" value="ThePrestige" />
			<label for="movie1"> The Prestige</label><br />
			<input type="checkbox" id="movie2" name="movie2" value="Inception" />
			<label for="movie2"> Inception</label><br />
			<input type="checkbox" id="movie3" name="movie3" value="Prisoners" />
			<label for="movie3"> Prisoners</label><br />
			<input type="checkbox" id="movie4" name="movie4" value="Interstellar" />
			<label for="movie4"> Interstellar</label><br />
			<input type="checkbox" id="movie4" name="movie5" value="Gonegirl" />
			<label for="movie5"> Gone Girl</label><br />
			<div class ="form-control">
			<label id="comments">Why is your chosen movie your favourite? If you selected "Other", please metion which movie.</label>
			<textarea id="w3mission" rows="4" cols="50"> </textarea></br>
			<button id="submit" type="submit" value="Submit" >Submit</button>


just remove height: 100% from the html selector

you beauty Thank You!!