Vaadin setting background not working

Question

So i'm a bit confused as to why setting a background image is not working. I can use other SCSS methods like .top etc to set colours etc but when it comes to pulling images through SCSS the application comes up with an error.

mytheme:

@import "../valo/valo.scss";
@import "../valo/fonts/fonts.scss";
@import "../valo/styles.css";


@mixin mytheme {
  @include valo-components;
  @include valo-common;
  @include vaadin-icons;
  @include valo;
    background-color: lawngreen;
}

styles.scss:

@import "mytheme.scss";
@import "addons.scss";
@import "../valo/styles.css";

// This file prefixes all rules with the theme name to avoid causing conflicts with other themes.
// The actual styles should be defined in mytheme.scss


.mytheme {
  @include addons;
  @include valo;
  @include mytheme;

  .backgroundImage{

      background: url("img/background.jpg ") ;
    }


  .v-view {

  }}

the app is running in production mode and the path for the image file is as follows:

D:\Programming\app\src\main\WebContent\VAADIN\themes\mytheme\img\background.jpg

Error:

INFO 16672 --- [nio-8080-exec-9] com.vaadin.server.VaadinServlet          : 
Requested resource 
[/VAADIN/themes/mytheme/VAADIN/themes/mytheme/img/background.jpg] not found from filesystem or through class loader. Add widgetset and/or theme JAR to your classpath or add files to WebContent/VAADIN folder.

does anyone have any idea whats going on here?

score 0 · Accepted Answer · answered May 04 '18 at 19:32

Thank you for including the error text. That error text shows the issue, which is that Vaadin is looking for the image at:

/VAADIN/themes/mytheme /VAADIN/themes/mytheme/img/background.jpg

Note the repeated root part of the path. As to why this is occurring I cannot say, but I would check your configuration (I know, random obvious answer). Maybe try this:

url("/VAADIN/themes/mytheme/img/background.jpg");

Vaadin setting background not working

1 Answers1