Click here to Skip to main content
14,239,753 members
Rate this:
Please Sign up or sign in to vote.
See more:
Im trying to create a project where the user has to input a username and password. Its a super simple page where the only things there are an image for the background and two input boxes for a username and password, along with the log in button.
I appreciate any help!

What I have tried:

This is what I have for the text boxes which work, I just need to know how to position them how I'd like... and over the top of any image

<form action="action_page.php">

  <pre><div class="container">
    <label for="uname">Username</label>
    <input type="text" placeholder="Enter Username" name="uname" required>

    <label for="psw">Password</label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit">Login</button>


This is the image I want as the background, and code to make it fit the browser window
* {
 margin: 0;
 padding: 0;
.imgbox {
 display: grid;
 height: 100%;
.center-fit {
 max-width: 100%;
 max-height: 100vh;
 margin: auto;

<div class="imgbox">


This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100