Having Trouble Setting Background Image on Vaadin Login Form-CodePudding

I'm trying to figure out how to put a background image in my login page of an application that I am making using Vaadin: enter image description here

I am not familiar with CSS which is a reason why I am having trouble.

I have tried using the Vaadin Theme Assistant, looking up this question on StackOverflow and the Vaadin Forum but none of those have led me to a solution. When I run my program, no background image loads on the login screen.

Layout of my program: enter image description here The image I can trying to use as a background is prepbooks.jpg.

Styles.CSS class:

@import url('./views/list-view.css');
@import url('lumo-css-framework/all-classes.css');

a[highlight] {
    font-weight: bold;
    text-decoration: underline;
}

 .backgroundImage{

      background: url("images/prepbooks.jpg") ;
 }

LoginView. class (the page in which I want the background image to be on):

package com.example.application.views;

import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.html.Image;
import com.vaadin.flow.component.login.LoginForm;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.BeforeEnterEvent;
import com.vaadin.flow.router.BeforeEnterObserver;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;

@Route("login")
@PageTitle("Login | Sample App")
public class LoginView extends VerticalLayout implements BeforeEnterObserver {

   private final LoginForm login = new LoginForm();

   public LoginView(){

      addClassName("login-view");

      setSizeFull();
      setAlignItems(Alignment.CENTER);
      setJustifyContentMode(JustifyContentMode.CENTER);

      login.setAction("login");

      VerticalLayout header = new VerticalLayout();
      header.add(new H1("Sample App"));
      header.setAlignItems(Alignment.CENTER);

      add(header, login);
   }

   @Override
   public void beforeEnter(BeforeEnterEvent beforeEnterEvent) {
      // inform the user about an authentication error
      if(beforeEnterEvent.getLocation()
            .getQueryParameters()
            .getParameters()
            .containsKey("error")) {
         login.setError(true);
      }
   }
}

CodePudding user response：

Place the prepbooks.jpg in the frontend/themes/flowcrmtutorial/images folder. Then you can reference it from the styles.css file.

frontend
└── themes
    └── flowcrmtutorial
        ├── images
        │   └── prepbooks.jpg
        └── styles.css

See the documentation for details: https://vaadin.com/docs/latest/styling/custom-theme/creating-custom-theme/#other-theme-assets

I assume you want to add the background image to the whole view. You already set a CSS class name on it with addClassName("login-view"), so we can use that in our CSS:

styles.css:

.login-view {
  background-image: url("images/prepbooks.jpg");
}