Package name showing up on css background image url helium mixin

Support
#1

I am trying to put css in a mixin
when I put the path to my image in the theme folder I get the app package prefix in the url and it doesent find the image

image

tried without the quotes… and its still putting that package path there…

Also, I am trying to have an mp4 video or webm video as background… i tried accessing it and the browser http://localhost:8080/app/VAADIN/themes/helium/images/fondo.mp4
it works

I tried background-image: url(images/fondo.mp4);
I edited the css on the developer tools and it doesent work.

Thank you for your support

#2

Hi,

Without a file structure, it’s hard to provide a solution. I can only assume that the images directory is placed within the theme root folder and the style definition in the helium-ext.scss file that is located in the com.dynamoware.ambient directory. In this case, the correct image url is "../images/logoColor.png", e.g.:

background-image: url("../images/logoColor.png");

Gleb

#3

Balshoi spasibo for answering on a weekend Mr. Gorelov
YES !!! that worked for the images… I was very confused to see a package name in the css.
Thank you for the help…

Finally is there any clue on how to put an mp4 as a background for a vbox?

#4

A video can’t be used as a background for a layout because the background-image attribute doesn’t support video files.

#5

Thanks for your response… Is there any way to put a background video in a vbox in Cuba?

#6

Convert video to gif and use as background-image.

#7

mp4 = 415kb
gif =8mb…
There is no compression on gif files… I was able to manage with a .webp file it works in the background-image

thanks for all your help !!!