How to set a background image in the LoginOverlay

Question

Simple thing. I need to use my own background for LoginOverlay in Vaadin 23. I tried crazy magic with stuff like this

vaadin-login-overlay-wrapper
vaadin-login-backdrop-wrapper

and it did not work.

Simon Martinelli · Answer

Create a file vaadin-login-overlay-wrapper.css in frontend//components

Then you can set the background image

:host [part="brand"] {
    background-image: url("images/login-banner.jpg");
    background-size: cover;
    background-position-x: center;
}