Set page backgroundImage property in xml or code



I have been trying to set the page background images using vanilla javascript or declare it in xml but having no success. The file is stored in the App_Resources folder. I think the problem is with the 'res:// ’ because if i do ‘~/images/file_name.png’ the file is loaded but this method removed the advantages of using ‘res://file_name’. Here is my code:

class="page login-page"
backgroundImage = “~/images/background.png” //does work
backgroundImage = “res://background.png” //does not work

I even tried:
const pageModule = require(“ui/page”);

function onNavigateTo(){
pageModule.backgroundImage = ‘res://background.png’;

but that does not work either. I get an error that says the file cannot be found. Can anyone point me in the right direction?


Can you share a screenshot of your App_Resources folder where the image(s) live?



I got this to work but one thing I realized is that “res:” does not like file extensions and files with dashes or underscores. but I got “res://background” to work.