Login Page Background Image
Covers the login page with a full-screen background photo and a dark overlay that keeps the form readable.
Opens WPIDE on
Code
// Full URL of the background image, and the overlay color on top of it.
$wpide_login_bg_image = 'https://example.com/wp-content/uploads/login-background.jpg';
$wpide_login_bg_overlay = 'rgba(0, 0, 0, 0.35)';
add_action( 'login_enqueue_scripts', function () use ( $wpide_login_bg_image, $wpide_login_bg_overlay ) {
$image = esc_url_raw( $wpide_login_bg_image );
$overlay = preg_replace( '/[^a-zA-Z0-9#(),.\s%]/', '', $wpide_login_bg_overlay );
if ( ! $image ) {
return;
}
wp_add_inline_style( 'login', sprintf(
'body.login{background:linear-gradient(%1$s,%1$s),url("%2$s") center / cover no-repeat fixed;}' .
'.login #backtoblog a,.login #nav a,.login .privacy-policy-page-link a{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);}',
$overlay,
$image
) );
} );Notes
Use a compressed image of about 1920px wide so the login page stays fast.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.