+ 2
How to type username and password in the image ? but my output shown outside the image
5 Answers
0
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.userform{
opacity: 0.8;
background-image: url(http://wallpapercave.com/wp/5KrzNMG.jpg);
background-position: center;
}
</style>
</head>
<body>
<form class="userform">
<input type="text" placeholder="Username" name="user">
<input type="password" placeholder="Password" name="pass">
<button><input type="submit" value="Log In" name="login"></button>
</form>
</body>
</html>
+ 1
how to increase the size of the image
0
You're missing the form tag.
Use the form tag and place the forms inside of the form tag. Set the background of the form as the image that you want to use using CSS.
0
As the content of the form gets longer, the background will as well. If you really must then use "px" or "em" for the unit for the height of the form instead of "%"
I would use "em"
Also try using "contain" instead of "cover" for the background image and see if you like that better