skip to Main Content
Menu

Custom WP Login – Full Screen Background

Want to create a great looking Custom WP Login and Full Screen Background  for your client’s backend? Just upload the following files:

1) background file – 1304px x 960px
2) client’s logo – 325px x 82px

Add the following code to your theme’s FUNCTION.PHP. Be sure to change “xxxxxxxxx” with your background file’s file name and “yyyyyyyyyyyy” with your client’s logo.

//--------------- Login Screen Wallpaper ---------------//

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/xxxxxxxxx) 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/yyyyyyyyyyyy) 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' );

Source : http://www.catswhocode.com/blog/snippets/custom-wp-login-full-screen-background

Custom WP Login – Full Screen Background Gallery

Alphonse

Editorial Staff at ETN Multimedia is led by Alphonse Tan. Page maintained by Alphonse Tan

Back To Top