Custom login form with full screen background

custom-login-wordpress

function login_enqueue_scripts(){
	echo '
		<div class="background-cover"></div>
		<style type="text/css" media="screen">
			.background-cover{
				background:url('.get_bloginfo('template_directory').'/images/background) no-repeat center center fixed; 
				-webkit-background-size: cover; 
				-moz-background-size: cover; 
				-o-background-size: cover; 
				background-size: cover; 
				position:fixed; 
				top:0; 
				left:0; 
				z-index:10; 
				overflow: hidden; 
				width: 100%; 
				height:100%;
			} 
			#login{ z-index:9999; position:relative; }
			.login form { box-shadow: 0px 0px 0px 0px !important; }
			.login h1 a { background:url('.get_bloginfo('template_directory').'/images/logo.png) no-repeat center top !important; } 
			input.button-primary, button.button-primary, a.button-primary{ 
				border-radius: 3px !important; 						background:url('.get_bloginfo('template_directory').'/images/button.jpg); 
					border:none !important;
					font-weight:normal !important;
					text-shadow:none !important;
				}
				.button:active, .submit input:active, .button-secondary:active {
					background:#96C800 !important; 
					text-shadow: none !important;
				}
				.login #nav a, .login #backtoblog a {
					color:#fff !important;
					text-shadow: none !important;
				}
				.login #nav a:hover, .login #backtoblog a:hover{
					color:#96C800 !important;
					text-shadow: none !important;
				}
				.login #nav, .login #backtoblog{
					text-shadow: none !important;
				}
			</style>
		';
	}
add_action( 'login_enqueue_scripts', 'login_enqueue_scripts' );

This code has to be added to the function.php in the active theme folder of WordPress.

The customization needs to be tweaked for look and feel.

However, there is a better way by which you can create a CSS file and add that to the folder rather than making the functions.php too long as functions.php is called at nearly every action you take on a Wordpress based website.

grt works