Vaadin background-image setSize？

Question

現在、私はCSSでVaadinプロジェクトのスタイルを設定しようとしています。私は以下を使用します：

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

しかし、結果は期待通りでした。画像の解像度は1920x1080ピクセルです。しかし、今私が低解像度の画面にウェブサイトを置く場合、私は画像の一部しか見ることができません。 cssを使用して画面のフルサイズを設定する可能性はありますか？

Answer 1

Vaadinの一部

フォルダsrc/main/resources/staticに場所に背景画像をVaadinと春のブートを実行し、そして春ブーツは、その後src/main/webappフォルダを使用して実行していない場合であれば。

次に、必要なCSSを追加して背景を変更します。デフォルトでは、Valoスタイルはdivの背景色をクラス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またはいくつかの他のソースを確認することができます。実際の解決方法は、イメージをどのように振舞うかによって少し異なります。