Get started
Loading...
Important Notice - Forums is archived

To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Product icon
TUTORIAL

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.

CssImport when using Component Exporter by Mikhail Shabarov, 7 months ago
Recent Posts
Vaadin Forum1. Vaadin Flow - Java

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

Mukesh Verma
7 years ago Jun 24, 2015 10:47am

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 

Ola Mattsson
7 years ago Jun 25, 2015 7:49am

Hi,

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

Hope that helps

+1
Mukesh Verma
7 years ago Jun 25, 2015 9:57am

Thanks a lot dear Ola Mattsson 
I replaced my image folder in theme directory of the web application as per your instruction.
Now it is working correctly.
Thanks agin :-)  

Ola Mattsson
7 years ago Jun 25, 2015 10:55am

My pleasure, glad it helped :D

+1
Yassine Karafi
7 years ago Jul 11, 2015 4:39pm

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

Ola Mattsson
7 years ago Jul 12, 2015 5:04pm

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. 

 

Yassine Karafi
7 years ago Jul 12, 2015 9:35pm

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.

isaiah ipas
2 years ago Jan 17, 2021 9:56am

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.