How to set background image of the web page using scss file

Flow
1

I have an image abc.jpg . which is located at /WEB-INF/images/abc.jpg. Now i going to set it as background image of my web page . but it is not displaying. I used the scss file and code is as below:

background-image: url(“…/WEB-INF/images/abc.jpg”);

Plese help me.
Thanks

2

Hi,

You need to put the file relative to the theme css, then refere directly from there. Like “images/abc.jpg”.

Hope that helps

3
4

My pleasure, glad it helped :smiley:

5

Hi,
I tried different methods to set a background (local ) image using a scss file but it does’nt work.

I replace my image folder in theme directory of the web application. > NO result
I tried to begin the URL with ("file:///…) > NO result

If someone is good in CSS stuff and can explain to me why I can’t use a local file as background image.
Thanks

6

Hi

have you read in book of vaadin how to create a theme and compile scss to css? I seems to me like your images aren’t where your css file is.

7

I just tried to begin the URL file like this background: url(“…/images/myimage.bmp”) and it worked .

And The Path of my images folder was like that C:\Users\YKarafi\workspace\lilo\WebContent\VAADIN\themes\images.

8

I have and image fitness.JPG, which is located at /REBELFIT-OI/img/fitness.jpg. Now i going to set it as background image of my web page . but it is not displaying. u used scss to code bellow;

background-image: url(‘…/img/fitness.jpg’)

and my path is C:\Users\Ipas\Desktop\REBEFLT.OI\img\fitness.jpg

Please i need help.
Thanks.