I am working on a Python Django project and I want to create a full-screen background.
The HTML code:
{
% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Colorlib Templates">
<meta name="author" content="Colorlib">
<meta name="keywords" content="Colorlib Templates">
<!-- Title Page-->
<title>Au Register Forms by Colorlib</title>
<!-- Icons font CSS-->
<link href="{% static 'register/vendor/mdi-font/css/material-design-iconic-font.min.css' %}" rel="stylesheet" media="all">
<link href="{% static 'register/vendor/font-awesome-4.7/css/font-awesome.min.css' %}" rel="stylesheet" media="all">
<!-- Font special for pages-->
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Vendor CSS-->
<link href="{% static 'register/vendor/select2/select2.min.css' %}" rel="stylesheet" media="all">
<link href="{% static 'register/vendor/datepicker/daterangepicker.css' %}" rel="stylesheet" media="all">
<!-- Main CSS-->
<link href="{% static 'register/css/main.css' %}" rel="stylesheet" media="all">
</head>
<body>
<div class="container" >
<div class="limiter">
<div class="container-login100" style="background-image: url('{% static "webmonitor/images/bg-01.jpg" %}') ;" >
<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
<form method="post" class="login100-form validate-form">
<span class="login100-form-title p-b-49">
Login
</span>
<form method="post" >
{% csrf_token %}
<div class="wrap-input100 validate-input m-b-23" data-validate = "Username is required">
<span class="label-input100">Username</span>
<input class="input100" type="text" name="username" placeholder="Type your username">
<span class="focus-input100" data-symbol=""></span>
</div>
<div class="wrap-input100 validate-input" data-validate="Password is required">
<span class="label-input100">Password</span>
<input class="input100" type="password" name="password" placeholder="Type your password">
<span class="focus-input100" data-symbol=""></span>
</div>
<div class="text-right p-t-8 p-b-31">
<a href="#">
</a>
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn">
Login
</button>
</div>
</div>
</form>
The CSS code:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: Poppins-Regular, sans-serif;
width: 100%;
}
/* Remaining CSS code has been omitted for brevity */
Here is the current look of the project:
https://i.sstatic.net/NLXg6.png
EDIT: The entire CSS code has been included as requested. If there are any errors, kindly let me know.