# Login Page Background Image

> Covers the login page with a full-screen background photo and a dark overlay that keeps the form readable.

- Type: PHP
- Runs: Run everywhere
- Category: [Login](https://wpide.com/library/category/login/)
- Tags: login, branding, background
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/login-background-image/

## Code

```php
// 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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Login Page Background Image" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/