Android Webview not showing backgroundImage from Javascript

Question

I know it's a silly mistake but I can't figure it out. I have been searching for it for the past 3 days. Basically, I have a function that changes the theme of a page by modifying CSS using Javascript. All properties are modified correctly, except the backgroundImage, don't know why. Here's the function:

function enforceTheme() {
    document.body.style.backgroundColor = theme["bgColor"];
    const background = "https://via.placeholder.com/300/09f/fff.png";
    document.body.style.backgroundImage = 'url('+background+');';
    document.getElementById("upBtn").style.color = theme["upBtnColor"];
    document.getElementById("downBtn").style.color = theme["downBtnColor"];
}

The strange thing is that the code gives no error and works fine, except for the backgroundImage not showing. And it works if I set it using CSS stylesheet. But I need to change it dynamically, so using Javascript.

Answer 1

You have to use Template Literals

Try this

function enforceTheme() {
document.body.style.backgroundColor = theme["bgColor"];
const background = "https://via.placeholder.com/300/09f/fff.png";
document.body.style.backgroundImage = `url('${background}')`;
document.getElementById("upBtn").style.color = theme["upBtnColor"];
document.getElementById("downBtn").style.color = theme["downBtnColor"];

}