How to Display a Fullscreen Background Image on the Login Page

Introduction

BuddyBoss does not provide a built-in option to display a fullscreen background image on the login page. However, you can achieve this layout by adding a small custom function to your active theme. This adjustment expands the login layout to full width, allowing your background image to display across the entire screen on larger devices. This guide explains how you can display a fullscreen background image on the login page.

Custom Workaround

Before proceeding, make sure you have a complete site backup.

1. Go to Appearance > Theme Editor in your WordPress admin dashboard.
2. Under Select theme to edit, choose your active theme (preferably BuddyBoss Child Theme), then click Select.
3. From the Theme Files list, open Theme Functions (functions.php).
4. Add the following code just before the closing PHP tag (?>):

function bb_login_custom_css() { ?>
    <style>
        @media screen and (min-width: 992px) {
            body.login.login-split-page #login {
                left: 50% !important;
            }
            body.login.login-split-page .login-split {
                width: 100% !important;
            }
        }
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'bb_login_custom_css' );

5. Click Update File to save the changes.

This will allow the login page layout to stretch across the full screen, enabling your background image to appear in fullscreen mode on desktop devices.

Note: Modifications are typically considered custom work, but we are making an exception in this case. Please review the BuddyBoss Support Policy.

Troubleshooting and FAQs

Q: The background image is not appearing fullscreen.
A: Ensure your login background image is already configured via BuddyBoss Theme Options or custom CSS. This code only adjusts the layout width.

Q: Will this affect mobile devices?
A: No. The change applies only to screens wider than 992px, preserving the mobile login layout.

Q: Can I customize the background image itself?
A: Yes. You can add or modify the background image using BuddyBoss Theme Options or by adding custom CSS.

Q: Can I revert this change easily?
A: Yes. Simply remove or comment out the code from functions.php and save the file.