Ich suche eine Lösung, um Hintergrundbild ohne CSS-Kenntnisse und Hinzufügen von CSS-Dateien zu erstellen. An diesem Punkt verlasse ich mich auf mächtige Kräfte von Vaadin. Offensichtlich ist die Lösung here nicht geeignet für mich, da ich ein eingebautes ValoTheme verwende und ich sehr meinen Prinzipien folgen will (benutze nur ein Styling).Hintergrundbild ohne CSS setzen
Ist es möglich, das ohne CSS zu tun?
Sie es nicht ohne Styling tun. Der Stil könnte in einer SCSS-Datei oder inline (Csslayout) sein. Hier ist, wie Sie es in .scss tun würden Sie müssen das Bild in VAADIN/themes // Bilder-Ordner einfügen.
@import "../valo/valo.scss";
@mixin mytheme {
@include valo;
// Insert your own theme rules here
.image-background{
background-color: red;
background-image: url("images/w3-background.jpg");
}
}
und gelten mit diesem Stil .addStyleName(), wie folgt aus:
@Theme("mytheme")
public class MyUI extends UI {
@Override
protected void init(VaadinRequest vaadinRequest) {
final VerticalLayout layout = new VerticalLayout();
setContent(layout);
layout.setSizeFull();
layout.addStyleName("image-background");
layout.addComponent(new Button("Hello, World!"));
layout.addComponent(new Button("Hello, World!"));
layout.addComponent(new Button("Hello, World!"));
layout.addComponent(new Button("Hello, World!"));
layout.addComponent(new Button("Hello, World!"));
layout.addComponent(new Button("Hello, World!"));
}
@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {
}
}
Hier ist der Screenshot: 
Möglicherweise müssen URL im Browser neu zu laden oder Browser löschen Geschichte, damit das geänderte CSS korrekt geladen wird.
Ich hoffe es hilft. :-)
Sie können den Hintergrund-Attribut in der body wie so gesetzt:
<body background='path/to/image/file.png'>
Hier ist der Link zu der Website W3 Schools Referenz: W3 Schools - Body Background Attribute
Ich habe es selbst herausgefunden, und zum Glück haben Sie und ich dasselbe gedacht. Darf ich Sie bitten? mit chroma dev console habe ich herausgefunden, dass styles.css die datei zweimal liest ... ist das normal? Ich kann nicht herausfinden, warum es so ist. Danke für die Antwort. – Reborn
Einstellung productionMode = true löst dies auf. –
leider löst das mein Problem nicht – Reborn