I need to use an image as my screen background. I'm fairly new at this platform. It would be helpful if I could see an example in a sample page. I'm sure I can use that to implement in my own pages. Thanks
Hello Tom,
Hope you're doing well.
I believe that you just need to import the image that you pretend in Service Studio:
Then you just need to add it to your screen CSS stylesheet:
body { background-image: url('<your-image-URL>'); }
You can copy the URL from the Runtime Path property from the image:
Hope that this helps you!
Kind regards,
Rui Barradas
Thanks for you reply. Actually I had tried that to no avail. Turns out I need to add a 'width' and/or a 'height' to the body in order for the background image to show up. I just arbitrarily came up with the width/height values since the actually size isn't known and it doesn't seem to matter what values I put in there... just as long as there is at least a width or a height or both. I ended up with this:
body {
background-image: url('/images/bgimage.png');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
width: 50px;
height: 40px;
}
The problem now is that the bgimage is displayed over the rest of the elements on the page. I assume z-index is the culprit since I see all the page elements for a split second and then the bgimage renders on top. I've tried both putting background z-index: 0; and z-index: 0; in the body - no luck. Any ideas?
Hi Tom,
Please check the following link as I had posted the answer for the same:
https://www.outsystems.com/forums/discussion/70990/background-image-set-using-theme-editor/#Post329375
Cheers,
Kunal Dhoble
Hello. Thank you. It's very useful information for me.