Responsive HTML's background image stretching with Javascript

Question

I got stuck for hours in this code, trying to modify HTML's background so that it can be automatically resized as the browser's resized by user, i'm trying to modify that through javascript : (i'm in firefox btw)

GM_addStyle('body {background-image: url("chrome://browserbackgrounds/content/browserbackgrounds
/Generic/Backgrounds/wall.jpg")}');

var images = document.getElementsByTagName ("img");
var x=0;
while(x<images.length)
{
if(images[x].src == "https://www.google.com/images/nav_logo170.png")
{
images[x].src = "chrome://browserbackgrounds/content/browserbackgrounds/Generic/Backgrounds   
/wall.jpg";
}
x=x+1;
}

now below is the part where i got stucked

document.getElementById("gsr").style.MozBackgroundSize="Cover";
document.getElementById("gsr").style.WebkitBackgroundSize="Cover";
document.getElementById("gsr").style.OBackgroundSize="Cover";
document.getElementById("gsr").style.BackgroundSize="Cover";

Answer 1

Did you try with backgroundSize ? (notice the lowercase initial b ). Same for the rest of properties, they need to be camelCased .