topic Re: Using a sheet background image by changing the CSS file in App Development

Using a sheet background image by changing the CSS file

hopkinsc — Thu, 09 Jan 2020 10:25:26 GMT

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..

Many thanks..

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

hopkinsc — Thu, 09 Jan 2020 11:44:54 GMT

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

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

lorenzoconforti — Thu, 09 Jan 2020 11:45:05 GMT

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

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

hopkinsc — Thu, 09 Jan 2020 11:49:55 GMT

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?

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

hopkinsc — Thu, 09 Jan 2020 14:23:47 GMT

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?

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

lorenzoconforti — Thu, 09 Jan 2020 14:44:27 GMT

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

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

hopkinsc — Thu, 09 Jan 2020 14:59:24 GMT

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

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

lorenzoconforti — Thu, 09 Jan 2020 15:03:21 GMT

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

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

hopkinsc — Thu, 09 Jan 2020 15:04:26 GMT

ahh ok, i understand. Thanks for your help

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

DawidDaw — Tue, 22 Sep 2020 07:21:12 GMT

Hello,

Have you ever managed to achieve the desired result, meaning two different images on two different sheets within the same app?

Thanks a bunch!