Vaadin background-image setSize?

Question

Actuellement j'essaye de styler un projet Vaadin avec css. J'utilise:

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

Cependant le résultat n'a pas été comme prévu. L'image a une résolution de 1920x1080px. Mais si je mets maintenant le site sur un écran à plus basse résolution, je ne vois qu'une partie de l'image. Est-il possible d'utiliser css pour définir l'image en taille réelle de l'écran?

Answer 1

partie Vaadin

Si vous exécutez Spring Boot avec Vaadin l'endroit de l'image d'arrière-plan dans le dossier src/main/resources/static, et sinon en cours d'exécution Spring Boot puis utilisez le dossier src/main/webapp. Puis ajoutez les CSS nécessaires pour changer l'arrière-plan.

Par défaut, le style Valo aura une couleur d'arrière-plan dans div avec la classe v-ui. Vous pouvez utiliser un thème personnalisé et remplacer l'arrière-plan grâce à cela ou vous pouvez mettre à jour le style directement à partir du code.

@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; }" 
     ); 
    } 
... 

partie CSS

Pour une partie de CSS, vous pouvez vérifier css tricks ou d'une autre source. La solution réelle dépend un peu de la façon dont vous voulez que l'image de fond se comporte.