Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Dynamically change background image size in Firefox

Reply
Thread Tools

Dynamically change background image size in Firefox

 
 
JV
Guest
Posts: n/a
 
      02-24-2008
I have code below for dynamically changing the size of a background
image depending on the user's viewable area, which works great in IE
as you will see, but doesn't work in Firefox. The non-MSIE code is
inside of the brackets adjacent to the 'else' statement. Any
suggestions on what I need to change to make this work in Firefox?
Thanks!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<script language="JavaScript">
var backgroundset = false; // do not change, for internal use only

function fixedBackground(url) {
document.body.background = url; if(!backgroundset) {
document.body.style.overflow = 'hidden';
document.body.style.padding = '0px';
document.body.style.margin = '0px';
var overlay = document.createElement('DIV');
if(navigator.userAgent.indexOf("MSIE") > 0) {
overlay.style.position = 'absolute';
overlay.style.top = '0px';
overlay.style.left = '0px';
overlay.style.height = '100%';
overlay.style.width = '100%';
overlay.style.overflow = 'auto';
overlay.innerHTML = document.body.innerHTML;
document.body.innerHTML = '<img id="background" height="100%"
width="100%" src="' + url + '" style="left: 0; bottom: 0; right: 0;
top: 0; z-index: 0" />';
document.body.appendChild(overlay);
backgroundset = true;
}
// This is where it goes wrong...
else {
overlay.setAttribute("style", "position: absolute; top: 0px; left:
0px; height: 100%; width: 100%; overflow: auto;");
overlay.innerHTML = document.body.innerHTML;
document.body.innerHTML = '<img id="background" height="100%"
width="100%" src="' + url + '" style="left: 0; bottom: 0; right: 0;
top: 0; z-index: 0" />';
document.body.appendChild(overlay);
backgroundset = true;
}
}
else document.body.background = url;
}
</script>
</head>
<body onload="fixedBackground('http://download.qj.net/uploads/
files_module/screenshots/253_PSP-background-thor64.jpg');">
<center>
<SCRIPT LANGUAGE="JavaScript">
document.write(" " + document.body.clientWidth + " " +
document.body.clientHeight + " " + window.outerWidth + " " +
window.outerHeight);
</script>
</center>
</body>
</html>

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
DIV background-repeat background-image? For shadow effect jc ASP .Net 3 03-19-2008 04:19 PM
DIV background-repeat background-image for shadowing effect jc HTML 1 03-19-2008 02:16 PM
not able to click on background tab and backgrounds in properties to change the background. rex Computer Support 2 12-06-2006 02:26 AM
mega pixels, file size, image size, and print size - Adobe Evangelists Frank ess Digital Photography 0 11-14-2006 05:08 PM
Firefox - Prevent TextField size change when user changes font size? Wongod HTML 2 10-04-2006 12:26 PM



Advertisments