I've got a background image that is kind of bandwidth heavy so I'm using body onload to load it last. What I haven't figured out is how to apply the CSS styling that I would normally use to make the image expand and contract with the browser size.
CSS code:
html, body{ width:100%; height:100%; overflow:hidden;}
#backgroundFill{position:absolute; z-index:1; width:100%; height:100%;}
html WITHOUT javascript:
<body><img src="wall.jpg" id="backgroundFill" />
html WITH javascript;
<body onload="setBackground()">
javascript:
function setBackground(){
document.body.style.backgroundImage='url(wall.jpg)';
}
I've tried:
document.getElementById('backgroundFill');
Any thoughts would be appreciated.
CSS code:
html, body{ width:100%; height:100%; overflow:hidden;}
#backgroundFill{position:absolute; z-index:1; width:100%; height:100%;}
html WITHOUT javascript:
<body><img src="wall.jpg" id="backgroundFill" />
html WITH javascript;
<body onload="setBackground()">
javascript:
function setBackground(){
document.body.style.backgroundImage='url(wall.jpg)';
}
I've tried:
document.getElementById('backgroundFill');
Any thoughts would be appreciated.
