Code to insert background image to WP login form

Hello,

I want to add a background image to the WordPress Login Form.

I inserted this code in my “functions.php” file, but unfortunately, I got an error message.

The code inserted is:

function login_background_image() {
echo ‘<style type=”text/css”>
body.login{
background-image: url( “http://example.com/wp-uploads/image.png” )!important;
}
</style>’;
}
add_action(‘login_head’, ‘login_background_image’);

The error message was pointed on this line:

echo ‘<style type=”text/css”>

What kind of error was it? Can you please sort out this code?

I really need to insert this code correctly, since it’s the simplest way to add a background image to my form.

Thank so much for your help.

Wouldn’t it be easier to amend the CSS file?

Hello Gandalf,

Thanks for your reply.

How to do as you suggested using CSS file?

I tried to insert only this in my CSS:

body.login{
background-image: url( “http://example.com/wp-uploads/image.png” )!important;
}

but it seems not working!

We can’t really tell without seeing the appropriate HTML, but I don’t think you will need body.login - .login should suffice.

It seems you have a typo there. If it is not the body that has the class-name “login”, the selector should probably be like:

body .login{

Mind the space that separates the two parts “body” and “.login”.

Either fix the typo or skip the “body” part as @Gandalf already suggested.

1 Like

All of your code’s quotation marks appear to be incorrect. :eek:
This should be…

body .login{
background-image: url( "http://example.com/wp-uploads/image.png")!important;
}

Also there is no need to use…

type="text/css"

coothead

That might well have been Discourse being “helpful”.

1 Like

…or not. :smiley:

coothead

Hello @davidovic123,

It would be nice to see the exact error message.

One thing I noticed is that you are using the login_head action. I use the login_enqueue_scripts action to add a background image to my /wp-admin/ login pages.

I do this in my cme plugin. Feel free to review the code, fork it, or install the zip from the release tag.

Here’s what it looks like.

Enjoy!

P.S. Quotes in the CSS url function are optional. I always leave them out.

1 Like

Hello,

It works. Really nice.

But there is one thing:
When you log out, there is a “dark Grey color screen” pops up before our background image displays on the screen.

I added:

transition: none;

to the backgroud image code, but with no effect!

How to get rid of this grey screen transition pop up?

Thank you @mark334 for your help.

Cheers!

1 Like

Hello @davidovic123,

Wonderful. Glad it’s working for you.

If I understand your follow-up question correctly, I think you want to remove the linear gradient.

So, delete or override this rule.

linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),

Give that a try.

If you follow this approach and you want to get that darkened effect back, then you’ll need to darken (i.e., reduce brightness) the image using your photo editor instead of using CSS. I hope that makes sense.

Thanks!

If you’d like to play around with background colour transitions, please give this CSS a try.

transition: background 0.5s linear;

Live demo on CodePen.

Cheers!

1 Like

Hello @mark334,

In fact, I don’t talk about the gradient effect. It looks great.

But I talk about a total grey screen which pops up and covers the screen when you log out or when you refresh the page. This grey screen appears briefly before our background image shows up.

have you this effect on you end?

Thank you.

Hello @davidovic123,

Sorry. I’ll try to be more clear. The grey flash you are referring to is the gradient background being loaded. If you follow my instructions, you should notice that the grey flash will be replaced by a white flash (default browser background colour).

Please give my suggestions above a try if you still want to remove that flash of the grey background colour.

Thanks!

1 Like