+ 2

How to type username and password in the image ? but my output shown outside the image

https://code.sololearn.com/WEjAGyKn624v/?ref=app

29th Jul 2017, 3:37 AM

Faizan Shaikh

5 Answers

<!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>

29th Jul 2017, 5:21 AM

God Usopp

+ 1

https://code.sololearn.com/WS6mEMyVCu72/?ref=app

29th Jul 2017, 5:55 AM

Faizan Shaikh

+ 1

how to increase the size of the image

29th Jul 2017, 5:56 AM

Faizan Shaikh

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.

29th Jul 2017, 5:10 AM

God Usopp

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

29th Jul 2017, 5:58 AM

God Usopp