Background Image for an application?

Support
#1

I am trying to insert an image in the backgroud for the application but its not happening.

Backgroud color is changing but if I am trying to put an Backgroud image its not happening.

Is the below line correct?


$v-background-image: url("C:/Users/pumaadmin/studio-projects/jishnu_cuba/modules/web/themes/halo/com.company.jishnucuba/1.PNG");

Any suggestions for the same?

My code is :-halo-ext-defaults.scss


$v-background-color: #F9F6F6;        /* component background colour */
$v-app-background-color: #BFDFEA;    /* application background colour */
$v-panel-background-color: #867A7A;     /* panel background colour */
$v-focus-color: #3b5998;             /* focused element colour */
$v-error-indicator-color: #ed473b;   /* empty required fields colour */
$v-background-image: url("C:/Users/pumaadmin/studio-projects/jishnu_cuba/modules/web/themes/halo/com.company.jishnucuba/1.PNG");
#2

Hi,

There is no $v-background-image variable in the Valo. You can find all supported variables of Valo here: Vaadin Valo Theme

If you want to change background image you have to assign stylename to the concrete UI component and write CSS rules with background-image property. Do not forget to add your images to theme folder.

Example:


<vbox width="100%" height="300px" stylename="my-background">
</vbox>

CSS:


.my-background {
  background-image: url(images/fan-red.png);
}
#3

How to apply this background image to table

#4

Hi,

To add a background image for a Table, you can use CSS like following:

.watermark .v-table-body {
  background: url(images/watermark.png) center center no-repeat;
}

But the rows of the table will overlap the background image.

Regards,
Gleb