Set background image without css

Question

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?

score 3 · Accepted Answer · answered Jan 05 '17 at 20:15

3

You can set the background attribute in the body like so:

<body background='path/to/image/file.png'>

Here's the link to the W3 Schools site for reference: W3 Schools - Body Background Attribute

answered Jan 05 '17 at 20:15

SteveK

995
5
17

Thank you for response, but i'm looking for a specific way how to do with Vaadin. Not plain HTML. – Malakai Jan 05 '17 at 20:18

score 1 · Answer 2 · edited Jul 23 '20 at 12:35

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

I figured it out by myself, and luckily you and me thought the same. May i ask you? using chroma dev console i figured it out, that styles.css file reads twice... is that normal? I can't figure it out why it does so. Thanks for response. — Malakai, Jan 11 '17 at 13:07

Set background image without css

2 Answers2