Google Apps Script Web App image workaround - dom

Question

I'm using a set of workaround functions I got from another stack overflow post, but I can't seem to modify them to work for a background image:
This works:
google.script.run
.withSuccessHandler( function(bytes){ showImage(bytes) })
.loadImageBytes("1WH0TrUxzzzzzzzzzcqEYZnTD6zPM9");
function showImage(bytes){
document.getElementById("page1").src = "data:image/png;base64," + bytes;
}
but this does not:
google.script.run
.withSuccessHandler( function(bytes){ showImage(bytes) })
.loadImageBytes("1WH0TrUxzzzzzzzzzcqEYZnTD6zPM9");
function showImage(bytes){
document.getElementById("page1").style.backgroundImage= "data:image/png;base64," + bytes;
}
The server side code is:
function loadImageBytes(id){
console.log(id);
var bytes = DriveApp.getFileById(id);
console.log(bytes.getName());
try{
bytes= bytes.getBlob();
bytes= bytes.getBytes();
}
catch(e){console.log(e);}
return Utilities.base64Encode(bytes);
}

Answer 1

I think that in your script, the value for backgroundImage is required to be modified. So how about this modification?
From:
document.getElementById("page1").style.backgroundImage= "data:image/png;base64," + bytes;
To:
document.getElementById("page1").style.backgroundImage = "url(data:image/png;base64," + bytes + ")";
Reference:
background-image