How To Add A Background Image To WordPress Login Page?

add a background image to wordpress login page

To customize the login page of your WordPress website, you can do a lot of things.

You can customize WordPress login page background, you can change login error message and many others things.

Have you ever thought to add an attractive background image? Yes, you can give a new look to your login page with a custom image.

Many people use the plugins for the customization, but here you will learn the easiest method with a few lines of the code.

To add a background image to WordPress login page, you just have to add a WordPress function consisting the path of the image.

Find And Edit The functions.php file of Your WordPress Theme.

You should know that for a WordPress theme, the functions.php file is one of the most important files.

You can add new features to your website using this file.

To give a better design to your login page, use this file.

You can open it from your WordPress admin panel. Go to Appearance>>Editor>>functions.php file.

If you’re not able to login then access it from the cPanel of the web hosting account.

Go to cPanel>>file manager>>wp-content>>themes>>theme name>>functions.php file.

Open the file and place the code.

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

This is an example of the code which would help you.

NOTE:- You have to replace the path of the image with the real path where you upload that image. Whether you upload the image to your media library or add it in the theme folder.

The path of the image should be correct.

It’s always recommended to choose the image of the bigger size so that it can fit the whole screen.

If you use any image of the narrow dimensions then it will get repeated. The normal dimensions of a computer screen are 1920px×1080px

Suppose one of your users have an HD screen computer and you add a smaller image then it won’t look good.

After adjusting the path and the image, save the code and you will see the result.

add background image

You have successfully added a custom background image to your WordPress login page.

Did You face Any Problem During The Process?

Many bloggers are afraid of using the codes. But if you do it carefully then you can do a lot of things with this CMS.

The above-shown code can help you add a background image to WordPress login page without creating any separate file.

Many users add a new file just to add this code, but what’s the need?

Did that code work for you? Did you face any problem? If you do then feel free to contact us.

You can also connect with us on Twitter, LinkedIn, and Facebook.

by Ravi Chahar

A WordPress Professional, web developer and designer who intends to guide his readers about WordPress, Blogging, Web Development, Web Design and more. I have expertise in WordPress theme development and customization. I can set up and redesign the Thesis themes. I have been working in this field for years now.

15 comments

    1. Hey Atish,

      The code consists the path of the images present in the image folder. Many people drop it somewhere else. You just have to edit the path and an attractive image will appear.
      Thanks for stopping by.
      Enjoy your weekend.
      ~Ravi

    1. Hey Matthew,

      People want some spark and adding an image can help. Though most of the people try to find the plugins but I always prefer manual methods.
      Hope this will work for you.
      Thanks for taking the time to share.
      Have a wonderful day.
      ~Ravi

  1. Hey Ravi,

    We know very well that our WordPress sites are higly customizable and we can add lot of features – due to this reason people love Wp.

    It is absolutely good tutorial and people love to add a background image because it glorify the site status. Eventually, thanks for sharing your healthy thought with us.

    With best regards,

    Amar kumar

    1. Hi Amar,

      To enhance the appearance of the login page, many website users add an image. It puts a positive impact on your readers.
      Thanks for taking the time to spread your words.
      Enjoy your day.
      ~Ravi

  2. Hey Ravi..

    That’s amazing, I have learned this but I need something more from you please also add how to change the wordpress login logo. By the way I’m using the plugin and my page load is increased.

    I want to reduce that from the custom code please share if you have already been write on this topic too 🙂

    Keep sharing the WP tips..
    Junaid Shahid recently posted…Content Marketer’s Keywords Guide: How To Pick The Right Keywords And Use Them?My Profile

    1. Hi Junaid,

      I have already written a tutorial about login logo. Just search “login logo” and you will find the guide. It’s similar the code shown in here. But you know that WordPress has different functions to target different locations.
      Enjoy your stay.
      ~Ravi

  3. Hey Ravi
    Thanks for sharing. This is awesome. WordPress is fully customizable and full of creativity. Let’s make the login screen looks awesome.

    1. Hey Nirmala,

      WordPress security is always a matter of concern.
      And I like the idea of adding a motivational quote so that you get motivated whenever you open the login page.
      Thanks for stopping by.
      Enjoy your day.
      ~Ravi

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge