How to set a background image in the LoginOverlay-CodePudding

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.

CodePudding user response：

Create a file vaadin-login-overlay-wrapper.css in frontend/<your theme>/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;
}

CodePudding user response：

Besides to @Simon Martinelli's answer, I suggest referring to the following official documentation for a deeper insight into styling any components within Lumo or any customized theme of your own:

https://vaadin.com/docs/latest/styling/custom-theme/creating-custom-theme/#vaadin-component-styles