There are tutorials out there that teach you how you can have your own custom image logo in your WordPress login page but do you also know that you can do the same to your login page’s background? Adam Wadsworth of CatsWhoCode has put up together this nice snippet that will allow you to do just that.

All you need aside from the code which I’ll be including in this post below is your own image that you intend to use as your login page’s background and upload it in your current themes folder. Once you’ve finished uploading your image, replace the image URLs in the code below with that of yours before copy/pasting it into your functions.php file. You may also want to customize the colors of the links as you wish.

//--------------- Login Screen Wallpaper ---------------//            
 function login_enqueue_scripts(){
 echo '
 <div></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
 {
 -moz-box-shadow: 0px 0px 0px 0px !important;
 -webkit-box-shadow: 0px 0px 0px 0px !important;
 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
 {
 -moz-border-radius: 3px !important;
 -webkit-border-radius: 3px !important;
 border-radius: 3px !important; 
 -khtml-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' );     

You might encounter a problem with the way the background image is being displayed when you try to view it on a mobile device. If so, you can just use a jQuery plugin that will allow you to add a dynamically-resized background image.

Incoming search terms for the article:

• html login page full screen
• wordpress change login page background
• background login wordpress
• wordpress login background image
• Logon screen styles web with an image
• replace wordpress background login page with image
• themes for websites login screen full size image
• wallpaper login word press
• web login backgrounds
• wordpress add icon on login box