Skip to main content
beatriz.winn
beatriz.winn
Contributor ⭐️⭐️⭐️
August 10, 2026
Solved

Login Page with an Image

Our community is private, is there a way to add a background image to the login page? all ideas, workarounds will be appreciated! 

 

akhilv
akhilvAnswer
Gainsight Employee ⭐️
August 10, 2026

You can do this using Custom CSS! Here's a sample:

/* background for login page */
body.private-register {
  background-image: url('YOUR_IMAGE_URL_HERE') !important;
  background-size: cover;
}

Just swap in your image URL and you can style it further if needed!

View in thread

3 replies

akhilv
Gainsight Employee ⭐️
akhilvAnswer
Gainsight Employee ⭐️
August 10, 2026

You can do this using Custom CSS! Here's a sample:

/* background for login page */
body.private-register {
  background-image: url('YOUR_IMAGE_URL_HERE') !important;
  background-size: cover;
}

Just swap in your image URL and you can style it further if needed!

Translate
    KatyLloyd
    KatyLloyd
    Contributor ⭐️
    October 6, 2026

    Hi! I am wondering what dimensions are reccomended for the background image?

    Translate
    akhilv
    Gainsight Employee ⭐️
    akhilv
    Gainsight Employee ⭐️
    October 6, 2026

    Hi ​@KatyLloyd , there's no official recommended size for this one, since background-size: cover scales the image to fill whatever screen the member is on.

    But Claude says:

    • Size: a landscape image of at least 1920 x 1080 works for most screens. For large or high-resolution displays, go up to 2560 x 1440.
    • File size: compress it. Aim for under 500 KB as JPG or WebP, because a heavy image slows down the login page.
    • Cropping: cover crops the edges on screens with a different aspect ratio, especially phones held upright. Keep the important part of the image (a logo, a face) near the center.

    This version also centers the image and stops it from tiling:

    body.private-register {
      background-image: url('YOUR_IMAGE_URL_HERE') !important;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    If it looks off on mobile, you can use a different image for portrait screens:

    @media (max-width: 768px) {
      body.private-register {
        background-image: url('YOUR_MOBILE_IMAGE_URL_HERE') !important;
      }
    }
    Translate
      Terms & ConditionsAccessibility statement