布局不可滚动

Question

我正在使用Vaadin / Spring启动设计应用程序，我已设法使用styles.scss文件中的以下css设置我的应用程序的背景（在myTheme中按照Vaadin）：

  .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;
  }

它在锡上执行的操作，它设置背景图像。我的问题是，这使页面不再滚动，这是我的一个表单的图片：。

有没有人知道我在哪里出错了？另外我真的想将此背景设置为我的应用程序的默认背景。任何人都可以建议如何做到这一点？

我将CSS更改为：

 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());

    }

按照Mo的指示，我现在正在获得37像素的填充？类构造函数如下所示：

{{1}}

Answer 1

使用此css：

.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;
}

修改

如果您希望backgroud img涵盖所有应用，只需将上述样式应用于body或html，并将该样式放在Global styles

中

  

全局样式是文档范围中定义的样式。全球风格   可以将文档正文和任何常规DOM内容作为目标，   包括应用程序视图