CODEWITHSUNDEEP
cssbackground-imagevaadinvaadin-flow
Basil Bourque
Basil Bourque

Reputation: 340098

Specify a background image via CSS in Vaadin 14 programmatically with Java

In Vaadin 14, we can set some CSS values programmatically in our Java code.

We can call getElement, then getStyle, and set the name of the CSS property along with a value.

For example, here we set the background color to green.

public class MainView extends VerticalLayout
{
    public MainView ( )
    {
        this.getElement().getStyle().set( "background-color" , "Green" );

How do we do this for a CSS property like background-image that takes an argument of the CSS function named url?

Hard-coding the CSS path does not work.

public class MainView extends VerticalLayout
{
    public MainView ( )
    {
        this.getElement().getStyle().set( "background-image" , "cat.jpg" );

➥ In Vaadin Flow, how to do we use Java to get CSS to find an image such as "cat.jpg"?

Furthermore, what should be the relative or absolute path to that image file be? I understand that the usual place for static images in Vaadin web app is in the src/main/resources folder.

Upvotes: 2

Views: 3100

Answers (1)

anasmi
anasmi

Reputation: 2652

In case of a "Plain Java Servlet" (non-Spring, non-CDI) Vaadin project, the file should go under /src/main/webapp

In case of Spring: /src/main/resources/META-INF/resources/img

Taken from official docs here: Resource Cheat Sheet

And, as @symlink has noticed in the comments, you should use a url('filename') syntax to reference an image in css : CSS background-image Property

For example, if I have a file named cat.jpg inside a /src/main/webapp/images, then this sets it getElement().getStyle().set("background-image","url('images/cat.jpg')");

Here is another example, with the picture file cat.jpg in src/main/webapp without nesting in an images folder. This is a Vaadin 14.0.10 web app, using the Plain Java Servlet technology stack option on the Start a new project with Vaadin page.

screenshot of file "cat.jpg" in project folder src/main/webapp.

Below is the source code for an entire view using this image as a background.

Notice the first line of the constructor, where we pass "url('cat.jpg')" as an argument. See how we used single-quote marks around the file name to embed in a Java string without escaping. Fortunately the CSS specification allows for either single quotes (') or double quotes (") — quite convenient for Vaadin programmers embedding CSS within Java code.

package work.basil.example;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;

/**
 * The main view contains a button and a click listener.
 */
@Route ( "" )
@PWA ( name = "Project Base for Vaadin", shortName = "Project Base" )
public class MainView extends VerticalLayout
{
    public MainView ( )
    {
        this.getElement().getStyle().set( "background-image" , "url('cat.jpg')" );

        Button button = new Button( "Click me" , event -> Notification.show( "Clicked!" ) );
        add( button );
    }
}

And a screenshot of this web app in action. The image is cropped because of the short height of the VerticalLayout. The layout is short because it contains only a button, whose label Click me can be seen faintly in blue text on the left edge. The cropped cat’s face is repeated across the page as is the default with CSS.

screenshot of Vaadin 14.0.10 web app with cat picture used in background

Upvotes: 5

Related Questions