Qlik Community

Qlik Sense App Development

Discussion board where members can learn more about Qlik Sense App Development and Usage.

Announcements
Qlik Analytics Tour 2020 Online. Begins August 10th. Register Today
cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Partner
Partner

Using a sheet background image by changing the CSS file

Hi all,

I am trying to use an image for my sheet background by making changes to the CSS file of a theme. 

I seem to have got something to work but the image is tiled instead of a single image.

Can anyone see what i need to do to get it working correctly please?

This is what i get when using the attached theme files..

 

QS Theme.PNG

 

Many thanks..

 

8 Replies
Highlighted
Partner
Partner

Re: Using a sheet background image by changing the CSS file

Hi all, 

OK i have managed to change the CSS file and the image now appears as i expect, the question i have now is if its possible to have a different image o the 2nd sheet in the app? 

So sheet 1 will be image 1

Sheet 2 on wards will be image 2

Thanks

Highlighted
Specialist II
Specialist II

Re: Using a sheet background image by changing the CSS file

.qvt-sheet {
background-image:
url("https://pngimage.net/wp-content/uploads/2018/06/png-background-images-free-download-2.png");
background-size: 100% 100%;
}

Highlighted
Partner
Partner

Re: Using a sheet background image by changing the CSS file

Hi Lorenzo,

thanks, that is exactly what i did 🙂 

Would you know how to reference a different sheet so i can use a different image?

Highlighted
Partner
Partner

Re: Using a sheet background image by changing the CSS file

OK i have found the name of the sheet id, does anyone know how i can use this in the CSS. 

i.e. i guess i need a CSS equivalent of an IF() statement...

IF data-sheet-id="22248851-546a-418c-a544-181404f94ace",

{
background-image: url("Background.png");
background-size: 100% 100%;
}

Any ideas?

Highlighted
Specialist II
Specialist II

Re: Using a sheet background image by changing the CSS file

I've been looking into this; the only thing I've found so far is to apply the image to the title background 

div [data-sheet-id="22248851-546a-418c-a544-181404f94ace"] {
background-image: url("https://pngimage.net/wp-content/uploads/2018/06/png-background-images-free-download-2.png");
background-size: 100% 100%;
}

 

As far as I can see there are no other objects in that refer uniquely to the sheet id

Highlighted
Partner
Partner

Re: Using a sheet background image by changing the CSS file

Thanks Lorenzo,

Apologies, i have only started learning CSS coding today! 

What in the following line relates to the sheet title..

div [data-sheet-id="22248851-546a-418c-a544-181404f94ace"] {

Thanks

Highlighted
Specialist II
Specialist II

Re: Using a sheet background image by changing the CSS file

the only div that calls data-sheet-id is the title one

Highlighted
Partner
Partner

Re: Using a sheet background image by changing the CSS file

ahh ok, i understand. Thanks for your help