css - 布局不可滚动

Question

我正在使用 Vaadin/Spring boot 设计一个应用程序，我已经设法使用位于 styles.scss 文件(根据 Vaadin 在 myTheme 中)中的以下 css 设置我的应用程序的背景:

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

    }

它按照锡 jar 上的说明进行操作，它设置背景图像。我的问题是这使得页面不再能够滚动，这是我的一个表单的图片: .

有谁知道我哪里出错了？此外，我真的很想将此背景设置为我的应用程序的默认背景。任何人都可以建议如何执行此操作吗？

我将 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;
  }

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

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

    }

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

编辑

如果您希望背景 img 覆盖所有应用程序，只需将上面的样式应用到 body 或 html 并将该样式放入 Global styles

Global styles are styles defined in the document scope. Global styles can target document body and any regular DOM contents inside, including the application views