Vaadin background-image setSize？

Question

目前我嘗試用CSS來設計一個Vaadin項目。我用：

.image-background { 
     background-image: url("../resources/bilder/wallpaper1.jpg"); 

然而結果並不如預期。該圖像的分辨率爲1920x1080像素。但是如果我現在把網站放在低分辨率的屏幕上，我只能看到圖像的一部分。是否有可能使用CSS來設置圖像的全屏大小？

Answer 1

Vaadin部分

如果運行春季啓動與Vaadin的地方背景圖像文件夾src/main/resources/static，如果沒有運行春季引導，然後用src/main/webapp文件夾。

然後添加所需的CSS來更改背景。默認情況下，Valo風格的背景顏色將與分類v-ui分開。您可以使用自定義主題並覆蓋背景，也可以直接從代碼更新樣式。

@SpringUI 
public class MyUi extends UI { 

    @Override 
    protected void init(VaadinRequest vaadinRequest) { 
     initBackground(); 
     initContent(); 
    } 

    private void initBackground() { 
     Page.getCurrent().getStyles().add(
       ".v-ui { background: url(background.jpg) no-repeat center center fixed;" + 
         "-webkit-background-size: cover;" + 
         "-moz-background-size: cover;" + 
         "-o-background-size: cover;" + 
         "background-size: cover; }" 
     ); 
    } 
... 

CSS部分

對於CSS的一部分，您可以檢查css tricks或其他來源。實際的解決方案取決於你想要背景圖像的行爲。