Setting style/background image on Layout

Flow
1

Hi - A newbie question.

I’m looking to set a background image on my login screen and the only clues I’ve found to this point are here:

https://vaadin.com/forum/thread/16831368/set-background-image-for-layout-not-working
https://vaadin.com/docs/v10/flow/importing-dependencies/tutorial-include-css.html
https://vaadin.com/docs/v10/flow/theme/theming-overview.html

so I’ve tried this:

@Route("")
@StyleSheet("../frontend/styles/styles.css")
public class LoginView  extends Composite<VerticalLayout>{

	    public LoginView() 
	    {
	        	getContent().getStyle().set("StyleName", "login");
	            getContent().add(new LoginFormComponent());
	        }
	    }
}

with styles.css

.login { 
		background-image: url("../frontend/images/loginBackground.svg");
	}

and file structure:

-src
	-main
		-webapp
			-frontend
				-images
					-loginBackground.svg
				-styles
					-styles.css

I’ve tried the many variations for the path to the image (…/webapp/frontend/images/loginBackground.svg, etc.), so I’m hoping it’s not that. Perhaps I’ve taken the wrong approach?

2

Try:
getContent.addClassName("login");
and
background-image: url("../images/loginBackground.svg");

3

That worked - Thank you, Joseph.