Add a background image to Login screen WordPress
- SOLVED
I am wanting a function that I can put in functions.php that will add a background image to the WordPress login screen. The background image would be located in the current themes images folder.
Answers (7)
Daniel Yoen answers:
you can try this hook :
function custom_login_bg()
{
echo '
<style type="text/css">
html {background-image: url(' . get_template_directory_uri() . '/images/login-bg.jpg);}
</style>';
}
add_action('login_head', 'custom_login_bg');
hope this help
69developer comments:
The body.login class is using the background-image: none and background-color to over ride.
69developer comments:
I change it to this and it works ok:
body.login {background-image: url(' . get_template_directory_uri() . '/images/bg-001.jpg) !important; }
Gabriel Reguly answers:
Hi,
I can do it, but not for $5.
$20 would be a better prize.
Regards,
Gabriel
Gabriel Reguly comments:
It can also use a backgound color, like this [[LINK href="http://clearcom.com.br/wp-admin"]]http://clearcom.com.br/wp-admin[[/LINK]]
Gabriel Reguly comments:
One can improve it adding background-size: 100% as in
body.login {
background-image: url(' . get_template_directory_uri() . '/images/bg-001.jpg) !important;
background-size: 100%;
}
Arnav Joy answers:
see this plugin
http://wordpress.org/extend/plugins/custom-login/
Arnav Joy comments:
you can add following to functions.php
//--------------- 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/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' );
source : http://www.catswhocode.com/blog/snippets/custom-wp-login-full-screen-background
Chuck Mac answers:
function my_login_background() { ?>
<style type="text/css">
body {
background-image: url(<?php echo get_bloginfo( 'template_directory' ) ?>/images/background.jpg);
}
</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_background' );
69developer comments:
Tried it but the background image is getting over written the the body.login class and background-image: none
Adrian Acevedo answers:
in functions.php
function zd_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('template_directory').'/includes/options/custom-login.css" />';
}
add_action('login_head', 'zd_custom_login');
CSS includes/options/custom-login.css
* { margin:0; padding:0; }
body.login {padding-top:0; border: none; background: #CCC!important; }