Vaadin Hintergrundbild setSize?

Question

derzeit versuche ich ein Vaadin-Projekt mit CSS zu stylen. Ich benutze:

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

Allerdings war das Ergebnis nicht wie erwartet. Das Bild hat eine Auflösung von 1920x1080px. Aber wenn ich jetzt die Webseite auf eine niedrigere Auflösung stelle, sehe ich nur einen Teil des Bildes. Gibt es eine Möglichkeit, mit CSS das Bild in voller Größe des Bildschirms zu setzen?

Answer 1

Vaadin Teil

Wenn Laufen Frühling Stiefel mit Vaadin dem Ort das Hintergrundbild im Ordner src/main/resources/static, und wenn nicht ausgeführt wird Frühling Stiefel dann src/main/webapp Ordner verwenden.

Fügen Sie dann das erforderliche CSS hinzu, um den Hintergrund zu ändern. Standardmäßig hat der Valo-Stil eine Hintergrundfarbe in div mit der Klasse v-ui. Sie können ein benutzerdefiniertes Design verwenden und den Hintergrund überschreiben, oder Sie können den Stil direkt aus dem Code aktualisieren.

@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 Teil

Für CSS Teil können Sie css tricks oder eine andere Quelle überprüfen. Die tatsächliche Lösung hängt davon ab, wie Sie sich im Hintergrund verhalten sollen.