WordPress Login Logo Squish Fix after 3.4 Update

After the recent update to WordPress 3.4, I noticed that the login logo on my sites with custom logos had become squished, and ends up looking like this photo below:

I noticed that the css for the login now contains background-size as a property and this is the likely culprit. To fix we are going to first specify a new background image, then set a height and width (use whichever size your image is) and then next we will set the background-size property.

In the functions.php of your theme, first add this:

[sourcecode language=”php”]add_action("login_head", "my_login_head");[/sourcecode]

This little bit of code will add the next bit of code to our login head.

Next add the following, be sure to replace with the url to your background image.

[sourcecode language=”php”]
function my_login_head() {
echo "
<style type=\"text/css\">
#login h1 a {
background: url(‘https://www.yourdomain.com/images/your-logo.png’) no-repeat !important;
width: 388px !important;
height: 175px !important;
display: block;
background-size: 388px 175px !important;
}
</style>
";
}
[/sourcecode]

Once added, uploaded and test.