I am currently working on developing an application using Vaadin and Spring Boot. I have successfully set the background of my app by utilizing the following CSS code within the styles.scss file (inside myTheme as specified by Vaadin):
.backgroundImage{
background: url("img/background4.png");
min-height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This code effectively sets the background image for the application. However, it has caused the page to become unscrollable. Here is a screenshot showcasing one of my forms: https://i.sstatic.net/QsdGg.jpg.
Can anyone suggest where I may be going wrong with this implementation? Additionally, I would like to make this background image the default background for my entire application. Any guidance on how to achieve this?
In an attempt to address the scrolling issue, I modified the CSS code as follows:
.backgroundImage{
background: url("img/background4.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Following Mo's suggestion, but now encountering a 37 pixel padding. The constructor class appears as follows:
public AddEmployeeView() {
GridLayout grid = new GridLayout(3,2);
setSizeFull();
setStyleName("backgroundImage");
setMargin(false);
setDefaultComponentAlignment(MIDDLE_CENTER);
addComponent(aUI.getHeader());
header.addStyleName("h2");
addComponent(header);
Panel topleft = topLeftAndBottom();
Panel topright = topRight();
grid.setSizeUndefined();
grid.addComponent(topleft, 0, 0, 0, 1);
grid.addComponent(topright, 1, 0, 1, 1);
addComponents(grid, generateButtons());
}