Resizing page background image. 1

naiku · Apr 25, 2002

Hi

I am currently working on my first site!! Will post the URL once its all finished so I can get some peoples thoughts on how it looks/loads etc.

Anyways back to the point, I am trying to set a page background image of some clouds, but want the image to reach to the edge of the page. I have tried to tile a small image but don't like how it looks as I don't like being able to see the edge of tiles. I don't want to use a big image for people with higher resolution because on lower res the user would have big scroll bars with lots of blank space except for a cloud. And I don't really like the idea of a first page with the message "Best viewed at 800 * 600" or something similar. Is there a way that I could set an image at the most popular screen size, and then set it to grow/shrink depending on the resolution/size of peoples display?

Hope the above all makes sense, Many thanks

Bignewbie · Apr 25, 2002

naiku,

we had the same problem and the only way we figured out is to put the background image in a layer and set that layer to z-index=-1. Then we have javascript resize the image according to its width height ratio.

We dont have much of a choice when it comes to browser background.

biggie

naiku · Apr 26, 2002

Thanks for the info, the only problem is I have no idea how to use javascript to do anything. Is it fairly easy to use it for resizing the image? and can you give me any pointers as to what I would need to do.

naiku

Bignewbie · Apr 26, 2002

Here's The Code: Hope this helps, Don't forget to change the imSRC variable. :!-*

<html>
<head>
<title>BG Adjust</title>
<style>
body {overflow:hidden; clip: rect( )}
</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<script language="JavaScript">
//script for stretch throughout whole page
function makeIm() {
NS4=(document.layers);
IE4=(document.all);
scaleWidth = true;
scaleHeight = true;
imSRC = "crop.JPG";
if (NS4) {
origWidth = innerWidth;
origHeight = innerHeight;}
function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();}
if (NS4) onresize = reDo;
if (IE4) onresize = reDoIE;
function reDoIE(){
imBG.width = document.body.clientWidth;
imBG.height = document.body.clientHeight;}
winWid = (NS4) ? innerWidth : document.body.clientWidth;
winHgt = (NS4) ? innerHeight : document.body.clientHeight;
imStr = "<div id=elBGim"
+ " style='position:absolute;left:0;top:0;z-index:-1'>"
+ "<img name='imBG' border='0' src="+imSRC;
if (scaleWidth) imStr += " width="+winWid;
if (scaleHeight) imStr += " height="+winHgt;
imStr += "></div><div id=bigDiv style=position:absolute;left:0;top:0;overflow:visible;z-index:1;height:"+ winHgt + ";width:"+winWid+ ">";
document.write(imStr);
}
makeIm();
</script>
</div>
</body>
</html>

naiku · Apr 26, 2002

Thanks for the code big, now hopefully last question for now because I will get this to work

I inserted the code (See below) but when I previewed in IE the background image stayed the same size. Have I put the code in the correct place?

Code:

<html>
<head>
<title>Naiku My Site</title>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;>
<script language=&quot;JavaScript&quot;>
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName==&quot;Netscape&quot;)&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
</script>
</head>
<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;>
<script language=&quot;JavaScript&quot;>
//script for stretch throughout whole page
function makeIm() {
NS4=(document.layers);
IE4=(document.all);
scaleWidth = true;
scaleHeight = true;
imSRC = &quot;Cloud Background.JPG&quot;;
if (NS4) {
origWidth = innerWidth;
origHeight = innerHeight;}
function reDo() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();}
if (NS4) onresize = reDo;
if (IE4) onresize = reDoIE;
function reDoIE(){
imBG.width = document.body.clientWidth;
imBG.height = document.body.clientHeight;}
winWid = (NS4) ? innerWidth : document.body.clientWidth;
winHgt = (NS4) ? innerHeight : document.body.clientHeight;
imStr = &quot;<div id=elBGim&quot;
+ &quot; style='position:absolute;left:0;top:0;z-index:-1'>&quot;
+ &quot;<img name='imBG' border='0' src=&quot;+imSRC;
if (scaleWidth) imStr += &quot; width=&quot;+winWid;
if (scaleHeight) imStr += &quot; height=&quot;+winHgt;
imStr += &quot;></div><div id=bigDiv style=position:absolute;left:0;top:0;overflow:visible;z-index:1;height:&quot;+ winHgt + &quot;;width:&quot;+winWid+ &quot;>&quot;;
document.write(imStr);
}
makeIm();
</script>

After the </script> tag I have the main content of my page, tables etc. Does it matter what I name the layer that the background image is on? If I have placed the code in the right place any ideas as to why its not working on my browser? Sorry if some of this seems obvious, I am very new to this and trying to learn as I go.

Thanks for all the time

naiku

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!

Resizing page background image. 1

naiku

Technical User

Bignewbie

Programmer

naiku

Technical User

Bignewbie

Programmer

naiku

Technical User

Similar threads

Part and Inventory Search

Sponsor