I'm looking for a solution to set up background image without CSS knowledge and addition of css files. At this point, I rely on mighty powers of Vaadin. Obviously, the solution posted here is not appropriate for me, since I use a built-in ValoTheme and I highly want to follow my principles (use only one styling).
Is it possible to do that without CSS?
On
You can not do it without styling. The style could be inside a SCSS file or inline (Csslayout). Here is how you would do it in .scss You need to paste the image in VAADIN/themes//images folder.
@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");
}
}
and apply this style using .addStyleName(), like this:
@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 {
}
}
Here is the screenshot:
You might need to reload URL in the browser or delete browser history in order for the changed CSS to be loaded correctly.
I hope it helps. :-)\
well here i do not use css so sorry
You can set the background attribute in the
bodylike so:Here's the link to the W3 Schools site for reference: W3 Schools - Body Background Attribute