Database Images as BackGround
Application Type
Reactive
Service Studio Version
11.51.3 (Build 57422)

Hi all!

I have a multi-tenant app and want to give each tenant the ability to upload a background image.

This part is done and tested and it works.

My issue begins at actually getting the background image to work as background.

I've tried to use the CardBackground widget but for some reason it just stretches the window infinitely regardless of image dimensions.

I'm not able to add the background to the screen style sheet nor to a container using:

"background-image: url(" + BackGroundImageURL + ");" 

Where "BackGroundImageURL" comes from the OutsystemsUI function BinarytoURL.

I've tried to add an OnAfterFetch to the Aggregate where I get the image with a JS Node with the following code:


document.getElementById($parameters.ElementId).setAttribute(

   "style", "background-image: url(" + $parameters.ImageURL + "');"


I added the ElementId of a container to see if it'd work but no luck.


Does anyone know of a way to do this?


Solution

I just had to dig a bit more.


This is the JavaScript I added to the Node on the OnAfterFetch of the Aggregate that picked up the image:

-----------------||-----------------||-----------------||-----------------||-----------------||-----------------||-----------------||-----------------||

var styleSheet = document.createElement("style")

styleSheet.type = "text/css"

styleSheet.innerText = "body{ background-image: url('" + $parameters.ImageURL + "'); background-repeat: no-repeat;background-size: cover;}"

document.head.appendChild(styleSheet)

-----------------||-----------------||-----------------||-----------------||-----------------||-----------------||-----------------||-----------------||

$parameters.ImageURL comes from the OutsystemsUI function BinarytoURL.

So you can create the aggregate and on the OnAfterFetch you'd have something like this:

 Hope this can help anyone do this exact same thing!


Hi Luis,

Hope you're doing well!

I have an alternative way to solve your issue.

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

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.