How to Change the WordPress Login Page Background With Code

This article is a localized edition of the Japanese original. Read the Japanese original

By default, the background of the WordPress login page (wp-login.php) is a light gray (#f0f0f1). To change it to an image or color that matches your site, add CSS through the hooks dedicated to the login page.

The hooks and loading order in this article were checked against wp-login.php in WordPress (7.1 series) as of November 2026.

The theme’s style.css and “Additional CSS” do not change it

This is the first thing people trip over when they write background CSS for the login page.

• A theme's style.css is loaded by the theme through wp_enqueue_scripts or similar. That hook does not run on the login page, so writing body.login { … } in style.css has no effect.
• The contents of Appearance → Customize → Additional CSS are output in wp_head. The login page does not use wp_head; it uses its own login_head, so this does not apply either.

To add CSS to the login page, use the login_enqueue_scripts action.

Where to put the code

Put it in one of these places.

• The child theme's functions.php: if you switch themes, the background goes back to the default.
• A PHP file in wp-content/mu-plugins/: it stays even if you switch themes. Create the folder if it does not exist and save the file with a name like login-background.php; it loads automatically.

If you write it in the parent theme's functions.php, a theme update erases it.

Use an image as the background

When the image is in the child theme

Upload the background image over FTP or similar to images/login-bg.jpg inside the child theme folder. The following code adds CSS after WordPress's standard login page stylesheet (login).

<?php
// Use an image from the child theme as the login page background
add_action( 'login_enqueue_scripts', function () {
	$image_url = get_stylesheet_directory_uri() . '/images/login-bg.jpg';

	$css = sprintf(
		'body.login {
			background-color: #1d2327;
			background-image: url("%s");
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}',
		esc_url( $image_url )
	);

	wp_add_inline_style( 'login', $css );
} );

• get_stylesheet_directory_uri() returns the URL of the active theme's folder (the child theme, if you use one).
• background-color is the color shown before the image loads or if it fails to load. Choosing a color close to the image makes the switch less noticeable.
• background-size: cover scales the image to the screen size so no empty space shows. The edges get cropped, so pick an image whose important part is in the center.

wp_add_inline_style() outputs CSS right after the specified stylesheet when it is printed. On the login page, the login stylesheet is queued before login_enqueue_scripts runs, so this combination lets you override the standard CSS.

When the image is in the Media Library

You can also use an image uploaded from Media in the admin, without FTP. The number in the URL when you open the image in the Media Library (item=123 in grid view, post=123 on the image's edit screen) is the attachment ID.

<?php
// Use a Media Library image (attachment ID 123) as the login page background
add_action( 'login_enqueue_scripts', function () {
	$image_url = wp_get_attachment_image_url( 123, 'full' );
	if ( ! $image_url ) {
		return; // Do nothing if the image is not found
	}

	$css = sprintf(
		'body.login { background: #1d2327 url("%s") center / cover no-repeat; }',
		esc_url( $image_url )
	);

	wp_add_inline_style( 'login', $css );
} );

Replace 123 with the real ID. If you delete the image from the Media Library, the background disappears too, so be careful not to delete it.

Use a color or gradient as the background

Without an image, you only change the CSS value.

<?php
add_action( 'login_enqueue_scripts', function () {
	$css = 'body.login { background: linear-gradient(135deg, #0f2027 0%, #2c5364 100%); }';
	wp_add_inline_style( 'login', $css );
} );

For a single color, write something like background: #1d2327;.

Keep text readable on a dark background

The inside of the login form box stays white, but the "Lost your password?" link (#nav), the "← Go to site name" link (#backtoblog) below the form, and the privacy policy link are drawn directly on the background. A dark background makes them hard to read, so change their color to match.

<?php
add_action( 'login_enqueue_scripts', function () {
	$css = '
		.login #nav a,
		.login #backtoblog a,
		.login .privacy-policy-page-link a {
			color: #ffffff;
		}
		.login #nav a:hover,
		.login #backtoblog a:hover {
			color: #c3c4c7;
		}
	';
	wp_add_inline_style( 'login', $css );
} );

If the background image has fine detail that makes the text hard to read, you can also lay a semi-transparent color over the image.

body.login {
	background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("https://example.com/wp-content/themes/my-child/images/login-bg.jpg");
	background-size: cover;
	background-position: center;
}

To use this CSS, put it in $css in the PHP above and output it with wp_add_inline_style(). Replace the URL with your own image.

Check the change

1. Log out, or open https://example.com/wp-login.php in a private browser window (example.com is your site).
2. If the background has not changed, clear the browser cache and reload.
3. If it still has not changed, check the page source for a style element with the ID login-inline-css. If it is missing, the code is not loaded (check the file location, whether the child theme is active, and for PHP typos).
4. If the style element is there but the image does not show, open the image URL from the CSS directly in the browser and confirm the image displays.

If you use a plugin that changes the login URL, check at the new URL.

Cautions

• The background image loads every time the login page opens. A JPEG or WebP about 1920px wide with a small file size keeps the page from slowing down.
• Changing the background does not change how secure the login is. Protect against unauthorized logins with login attempt limits and two-step authentication.
• If you set the background with a login page plugin, its CSS can overlap with the code in this article and give unexpected results. Use one or the other.
• WordPress updates can change the login page HTML and class names. Check the page after updating.

Summary

• Neither the theme's style.css nor "Additional CSS" loads on the login page, so add CSS with login_enqueue_scripts.
• Use wp_add_inline_style( 'login', $css ) to write the body.login background after the standard stylesheet.
• Put the image in the child theme, or get the URL from a Media Library attachment ID.
• With a dark background, also change the color of the #nav and #backtoblog links.

How to change parts other than the background, such as the logo and messages, is covered in How to customize the WordPress login page. For protection against unauthorized logins, see How to limit WordPress login attempts.

Questions about WordPress? The publisher of this site is based in Japan and replies in Japanese. Contact (Japanese)