Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

$5
Add a background image to Login screen

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.

This question has been answered.

69developer | 07/25/12 at 8:43am Edit

The experts have suggested, on average, a prize of $20 for this question.

(7) Possible Answers Submitted...

See a chronological view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

Last edited:
07/25/12
8:46am
Gabriel Reguly says:
Hi,

I can do it, but not for $5.

$20 would be a better prize.

Regards,
Gabriel
- 07/25/12 8:48am
  
  Gabriel Reguly says:
  It can also use a backgound color, like this http://clearcom.com.br/wp-admin
- 07/25/12 9:36am
  
  Gabriel Reguly says:
  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%;

}
```

Last edited:
07/25/12
8:48am

Arnav Joy says:

see this plugin

http://wordpress.org/extend/plugins/custom-login/

07/25/12 8:52am

Arnav Joy says:

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

Last edited:
07/25/12
8:51am

Chuck Mac says:



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' );

07/25/12 8:55am

69developer says:
Tried it but the background image is getting over written the the body.login class and background-image: none

Last edited:
07/25/12
8:53am

Daniel Yoen says:

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

07/25/12 8:58am

69developer says:
The body.login class is using the background-image: none and background-color to over ride.

07/25/12 9:03am

69developer says:

I change it to this and it works ok:



body.login {background-image: url(' . get_template_directory_uri() . '/images/bg-001.jpg) !important; }

Last edited:
07/25/12
10:36am

Adrian Acevedo says:

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; }

Last edited:
07/25/12
11:02am

This answer was downvoted by the top experts.
Last edited:
07/25/12
12:04pm

This answer was downvoted by the top experts.

This question has expired.

Gabriel Reguly, 69developer, Hai Bui, Arnav Joy, Manoj Raj voted on this question.

Current status of this question: Completed

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

Ask your WordPress questions! Pay money and get answers fast! (more info)

$5 Add a background image to Login screen

(7) Possible Answers Submitted...

$5
Add a background image to Login screen