Background Image

Hi David,

I am testing the new 2021.24 which I just got and was trying to set the background image and when I compiled the app, the background image did not work for both the View and ImagePush. I've also setup Files Manager for my image and use the App Path in the Style window for the background image.

Hope to hear from you soon.

Regards,

Hello Danny,

Can I ask how you are trying to do it? You are using the app's or view's Style inspector? Or maybe using the app's Custom style option and some CSS rules?

Hi David

I'm using the IDE controls style inspector where I enter it in the view1 Style window --> Background --> BackgroundImage --> app/images/50thAnniversary.jpg ( which I added the image via File Manager).

Hello Danny,

Thanks for your reply. There are a couple of things to consider. First of all, we must indicate in the "BackgroundImage" the URL of the image in the expected way, that is, like below:

Yes; we must include the path inside the "url", which is what the "BackgroundImage" CSS rule requires. On the other hand, note the URL path of the above image: we don't use the "app/images/..." path, but the "../images/..." path, since we must take in consideration the relative place of the app's CSS style files.

Dear David

I tried every suggestion you recommended but I still can't get it to show the background image. Below are 2 configurations that I've tried. The first I'm using the Style Property with the URL as indicated below in the first image.

The second method that I tried, is via the View1 designer as shown below in the second picture

I also want to assign different background image to different views and how do I do that?

Hello Danny,

If you use the style inspector, you must place something like the below in the "BackgroundImage" CSS rule:

Note that you must place something like the above "as is", in other words, you cannot place only the image URL, even if you use the proper URL, that is, "../images/50thAnniversary.jpg", you must place the entire above string, including the "url()".

If you want to use the app's Custom Style option, then you must specify the selector of the app's view. You can learn about runtime selector in this help topic. For example, supposing your app's view is named "view1", you can place the below CSS code:

On the other hand, if you want to change the background image at runtime, we can use a bit of Javascript to do it: you can place the below code in a button click event, for example, supposing your app's view is named "view1":

Note how in the above case we are using another URL / path for the image: this is because we need that URL / path to be relative to our "index.html" file, not to be relative from the app's CSS stylesheets.

Dear David

Thank you so much for all the help. I truly appreciate your patience in dealing with my most fundamental questions.

Hello Danny,

Thank you so much for all the help. I truly appreciate your patience in dealing with my most fundamental questions.

No problem! The point is that you got it. :-)