How To Create A Log In Form On Image?


Hi guys. What’s going on? I have passed a great day.

However, in my previous article i have discussed about how you can add a background image. Why am i talking about this?

It is because today I am going to show you a great tip. In this article you will learn how to make a log in form on image. Before starting my coding let’s see the preview of this. 🙂

Wow!!!!!!!!!!!!!!!!!!!! This is really cool. Am i right?

Let’s start coding.

Apply HTML Code

First Step:: You need to create the basic structure of HTML. Let’s create this.

<!DOCTYPE html>


Second Step:: Add your form now.

			Create A Log In Form On Image
<!-- log in form -->
    <input type="text" name="name">
    <input type="password" name="password">

We are all set. Time to add css codes.

Apply Css Code

First Step:: Add css code for background image of our page. Check this-

	background-image: linear-gradient(#00000095,#00000055),linear-gradient(#00000055,#00000095), url(images/coffee-569178_960_720.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;

Let’s check how it is looking.

Second Step:: Hae. We have added background image. Now apply css code for form.

	      padding: 25px;
	      width: 550px;
	      background-color: #dddddd20;
	      left: 27%;
	      top: 25%;
	      font-size: 20px;
	      display: inline-block;
	      box-shadow: 0px 20px 30px rgba(0,0,0,0.2);
	      position: absolute;
	      border-top: 1px solid black;
	      border-bottom: 10px solid pink;
	      color: #fff;
	      border-bottom-left-radius: 33%;
	      border-top-right-radius: 15%;

Third Step:: Add css code for input items.

input[type=text], input[type=password] {
	      width: 100%;
	      padding: 15px;
	      margin: 8px 0;
	      display: inline-block;
	      border: 1px solid #ccc;
	      box-sizing: border-box;
	      text-align: center;
	      padding: 15px;
	      cursor: pointer;
	      font-size: 17px;
	      border:1px solid green;
	      width: 120px;
	      font-family: georgia;

Add this? We are finished. Time to check our output.

See this?

Is not it good? Try yourself. <3

Related posts for you

Share Your Opinion With Me