WordPress 3.4: Fix your stretched custom login logo

Thoughts from the team
By    | June 17, 2012 | Code Snippets, Tips & Tricks,

A finishing touch I often add to WordPress sites is a custom login logo. After updating to version 3.4 recently, I noticed the logo had become stretched and distorted:

It turns out this issue is caused by WordPress 3.4’s new support for higher-resolution (or “retina”) displays in the admin panel. To ensure the new graphics appear at the correct size on all devices, background-size attributes have been added to the core CSS. As your custom logo is likely not the same size as the WordPress logo, all that’s needed is to set background-size to auto – making the updated function:

function custom_login_logo() {
	echo '
		<style type="text/css">
		.login h1 a { 
			background-image:url('.get_bloginfo('template_directory').'/images/login_logo.png);
			background-size:auto;
		}
		</style>
	';
}
add_action('login_head', 'custom_login_logo');

And there it is! All fixed.

More like this