Image background for V.Layout

General
1

I’m trying to create a stylish Company profile page using Vaadin flow, but IDK how to set image-background to page header area , same as Facebook profile page.
Anyone can help ?

2

I’d recommend a Div with background-image set in CSS. If the background image is static you could place it with the theme files and call the image from CSS.

If you need to swap the image in Java code. You could do

div.getStyle().set("style", "background-image: url('" + path + "')");
div.addClassName("cover-image");

Then in your CSS styles

.cover-image {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
1 Like
3

You can also use div.getStyle().setBackground(...).

1 Like