Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Resizing background image using Javascript

Status
Not open for further replies.
naiku

naiku

Technical User
Joined
Apr 25, 2002
Messages
346
Location
US
Hi

I am using Javascript to resize the background image on my site depending on what resolution the visitor to the site has. The site has been created for 800 * 600 and only has a vertical scroll bar.

The image resizes as expected but if there are any scroll bars, any part of the background which is not currently on screen does not get filled with the background. Eg: When I view it on 800 * 600 I just have the vertical scroll bar and the background fills what can be seen on the screen, when I scroll down anything beneath the bottom of the screen when initially loaded does not have a background.

Not sure if any of that makes sense, if it does can someone tell me how to get my background to fill the entire page regardless of scroll bars.

If any more information is needed then ask away. Thanks in advance

naiku
 
Sort by date Sort by votes
Can you post the body tag code? Have Fun...

Sharky99 >(::O>
 
Upvote 0 Downvote
The code I am using is as follows, the first section I have in the head of the document

Code: 
<!-- Begin
function Is() {
var agent = navigator.userAgent.toLowerCase();
this.major = parseInt(navigator.appVersion);
this.minor = parseFloat(navigator.appVersion);
this.ns = ((agent.indexOf('mozilla') != -1) &&
(agent.indexOf('spoofer') == -1) && (agent.indexOf('compatible') == -1) && (agent.indexOf('opera') == -1) && (agent.indexOf('webtv') == -1));
this.ns2 = (this.ns && (this.major == 2));
this.ns3 = (this.ns && (this.major == 3));
this.ns4 = (this.ns && (this.major == 4));
this.ns6 = (this.ns && (this.major >= 5));
this.ie = (agent.indexOf(&quot;msie&quot;) != -1);
this.ie3 = (this.ie && (this.major < 4));
this.ie4 = (this.ie && (this.major == 4) &&
(agent.indexOf(&quot;msie 5.0&quot;)   == -1));
this.ie5 = (this.ie && (this.major == 4) &&
(agent.indexOf(&quot;msie 5.0&quot;) != -1));
this.ieX = (this.ie && !this.ie3 && !this.ie4);
}
var is = new Is();
function layerObject(id,left,top,visibility) {
if (is.ie5||is.ns6){
this.obj = document.getElementById(id).style;
this.obj.left = left;
this.obj.top = top;
this.obj.visibility = visibility;
return this.obj;
}
else if(is.ie4) {
this.obj = document.all[id].style;
this.obj.left = left;
this.obj.top = top;
this.obj.visibility = visibility;
return this.obj;
}
else if(is.ns4) {
this.obj = document.layers[id];
this.obj.left = left;
this.obj.top = top;
this.obj.visibility = visibility;
return this.obj;
   }  
}
function layerSetup() {
backgroundLyr = new layerObject('backgroundLayer', 0,0,'visible');
}
function findSize() {
if(is.ns4 ||is.ns6) {
available_width=innerWidth;
available_height=innerHeight;
layerSetup();
} else if(is.ie4 || is.ie5) {
available_width=document.body.clientWidth;
available_height=document.body.clientHeight;
layerSetup();
   }
}
function winResize() {
if(is.ns4 ||is.ns6||is.ie4||is.ie5) {
history.go(0);
   }
}
//  End -->

Then I have this in the body tag of the document:
Code: 
<body bgcolor=&quot;#FFFFFF&quot; text=&quot;#000000&quot; leftmargin=&quot;15&quot; topmargin=&quot;15&quot; marginwidth=&quot;15&quot; marginheight=&quot;15&quot; onLoad=&quot;findSize();&quot; onResize=&quot;winResize()&quot;>

and finally in the actual body I have

Code: 
<!-- Begin
if(is.ns4 || is.ns6) {
available_width = innerWidth;
available_height = innerHeight;
}
else if(is.ie4 || is.ie5) {
available_width=document.body.clientWidth;
available_height=document.body.clientHeight;
}
if(is.ie4 || is.ie5 || is.ns6 || is.ns4) {
image1_width = (available_width * 1.00);
image1_height = (available_height * 1.00);
var image1 = '<img src=&quot;sky.jpg&quot; width=&quot;' + image1_width + '&quot; height=&quot;' + image1_height + '&quot;>';
document.write(image1);
}
//  End -->

I got the code from a Java site, can't remember the URL right now, its on another PC. Any ideas why it does not fill completely with the background when I have a scrollbar?

Thanks
naiku
 
Upvote 0 Downvote
Are you using a picture or tiles??

If you use tile you don't need all the script. Have Fun...

Sharky99 >(::O>
 
Upvote 0 Downvote
I am just using one picture, I want it to stretch to fill the entire page no matter what size resolution the visitor to the site has. I don't like the idea of tiling it as I think the tile joins look crappy

naiku
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
1K
lexer
lexer
Mike Lewis
  • Locked
  • Question Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid)
Replies
5
Views
2K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question Question
Javascript events
Replies
1
Views
619
Daniel K
Daniel K
Marclem
  • Locked
  • Question Question
javascript:navigator.registerProtocolHandler
Replies
1
Views
629
Marclem
Marclem
JScannell
  • Locked
  • Question Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
944
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top