Hi,
happy new year 
As some of my fellow forum users here, I take the time between the years and migrated the first of my apps to Vaadin 25 
This app use an LoginView extends LoginOverlay and I usually customize the background image via CSS:
vaadin-login-overlay-wrapper::part(backdrop) {
background-image: url('images/login-background.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
During migration, I made the following changes as suggested by the official Vaadin docs:
- replace
@Themewith@StyleSheet("css/xyz.css") - move the css files to
src/main/resources/META-INF/resources/css - move the image to
src/main/resources/META-INF/resources/images - use an absolute image path in CSS, starting with slash
background: url('/images/login-background.jpg');
- adjust the Spring Security configuraton for those static files.
This all doesn’t work. The background image wasn’t visible 
But the browser dev tools shows
a) css file was loaded successfully
b) referenced background image was loaded successfully
After adding the Chrome Dev MCP to my Claude based setup, the following hint came up:
The image loads successfully, but the problem is that Vaadin’s internal Shadow DOM styles use the background shorthand, which overrides your background image, despite !important.
The problem: external CSS can only override Shadow DOM internals to a limited extent. The best solution is to set it directly in the Shadow DOM using JavaScript:
So I have to add the following to my LoginView.java
@Override
protected void onAttach(AttachEvent attachEvent) {
super.onAttach(attachEvent);
getElement().executeJs(
"const wrapper = this.shadowRoot.querySelector('vaadin-login-overlay-wrapper');" +
"if (wrapper && wrapper.shadowRoot) {" +
" const backdrop = wrapper.shadowRoot.querySelector('[part=\"backdrop\"]');" +
" if (backdrop) {" +
" backdrop.style.setProperty('background', " +
" 'url(/images/login-background.jpg) center/cover no-repeat', " +
" 'important');" +
" }" +
"}"
);
}
Placing the css part from above to the CSS file also doesn’t work. I need this whole javascript stuff in my java class 
Is there another, easier way to customize such simple thing as the background image for the login view ?
If not, please provide one in one of the next Vaadin version.
Kind regards
Dominik