How to add background image in LoginOverlay in vaadin 13?

Question

I am using Vaadin 13s' new component LoginOverlay. I want to add background image using setTitle() as shown here.

        loginOverlay = new LoginOverlay();
        loginOverlay.setOpened(true);
        Component titleComponent = new Image();
        ((Image) titleComponent).setSrc("frontend/img/seven-oceans.jpg");
        loginOverlay.setTitle(titleComponent);
        loginOverlay.setDescription("Insert Employee Id and Password");
        loginOverlay.setAction("login");
        loginOverlay.addForgotPasswordListener(e->{
            Notification.show("Forgot password not yet handled", 30, Notification.Position.TOP_CENTER);
        });
        add(loginOverlay);

But, no image is loading.

score 1 · Accepted Answer · answered Apr 03 '19 at 07:21

You have to call loginOverlay.setOpened(true) after setting the title component.

Reason: If you have a look at the setTitle(Component component) method implementation it says:

if (!this.isOpened()) {
     if (this.title != null) {
          this.title.getElement().removeFromParent();
     }

     this.title = title;
     if (title != null) {
          title.getElement().setAttribute("slot", "title");
          this.getElement().appendChild(new Element[]{title.getElement()});
     }
 }

So the setTitle() call doesn't do anything if the form is already "opened".

Not relevant for the image to be displayed, but as an improvement you also can change

Component titleComponent = new Image();
((Image) titleComponent).setSrc("frontend/img/seven-oceans.jpg");

to

Image titleComponent = new Image("frontend/img/seven-oceans.jpg", "alt text");

So the final code looks like:

loginOverlay = new LoginOverlay();
Image titleComponent = new Image("frontend/img/seven-oceans.jpg", "alt text");
loginOverlay.setTitle(titleComponent);
loginOverlay.setDescription("Insert Employee Id and Password");
loginOverlay.setAction("login");
loginOverlay.addForgotPasswordListener(e->{
            Notification.show("Forgot password not yet handled", 30, 
              Notification.Position.TOP_CENTER);
        });
loginOverlay.setOpened(true);
add(loginOverlay);

Result looks like:

kscherrer · Answer 2 · 2019-04-03T08:08:15.373

1

This can be done with CSS

Not only can you set a background-image for the title part, I can also recommend defining a background image for the big gray part surrounding the login form. You can of course choose to define only one of the two backgrounds.

<link rel="import" href="../bower_components/vaadin-login/theme/lumo/vaadin-login-overlay-styles.html">
<dom-module id="login-with-background-image" theme-for="vaadin-login-overlay-wrapper">
    <template>
        <style>
            /* this will add bg image to title part */
            [part="brand"] {
                background-image: url(../images/login-title-banner.png);
                background-size: contain; /*or cover, your choice*/
            }
            /* this will add bg image to surrounding grey area */
            [part="backdrop"] {
                background-image: url(../images/login-background-image.jpg);
                background-size: cover;
            }
        </style>
    </template>
</dom-module>

it will then look like this: (my choice of example images was maybe not optimal here, especially for the title background. But I hope it gets the point across)

edited Apr 03 '19 at 08:08

answered Apr 03 '19 at 08:02

kscherrer

5,486
2
19
59

where is the css in the project. how is it imported? – d2k2 Jan 30 '20 at 14:42
1

@d2k2 check out [Where should I place my static files](https://stackoverflow.com/a/57553974/3441504). In this example (Vaadin 13), I imported it with `@HtmlImport`, because the styles are encapsuled in a `.html` file. In Vaadin 14+ I would define the styles in an actual `.css` file, and import it in the LoginView with `@CssImport(value = "./styles/loginOverlayWrapper.css", themeFor = "vaadin-login-overlay-wrapper")` – kscherrer Jan 30 '20 at 15:35
How is this achieved with vaadin 20+? – kolle_86 Sep 28 '21 at 13:31
@kolle_86 I haven't tried 20+ yet, but I would assume it's done the same way as 14 – kscherrer Oct 01 '21 at 12:17
Yes, in Vaadin 22.0.1 it works the same way: import the css file with @CssImport (at your `LoginView` class) and add your styles for the parts into that css file. – S. Doe Dec 20 '21 at 12:17

How to add background image in LoginOverlay in vaadin 13?

2 Answers2