Having a problem with javascript for a background...dont know where to put it

Hi.. Im new... first question.  
I have a page that has wriitng on it... I want to put a background image behind the words and keep the centering the same in any screen resolution.  (The image sort of has a break in the middle to see the words best).  I found this javascript here:

<script language="JavaScript">
function makeIm() {
NS4=(document.layers);
IE4=(document.all);
scaleWidth = true;
scaleHeight = true;
imSRC = "http://www.marikudla.com/test.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>";
document.write(imStr);}
makeIm();
</script>

but I cant figure out where to put it in my code!  Here is the code for the page...

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>vipmax</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function makeIm() {
NS4=(document.layers);
IE4=(document.all);
scaleWidth = true;
scaleHeight = true;
imSRC = "http://www.marikudla.com/test.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>";
document.write(imStr);}
makeIm();
</script><style type="text/css">
<!--
body {
      background-image:  url();
      background-color: #000000;
}
a:link {
      text-decoration: none;
      color: #FFFFFF;
}
a:visited {
      text-decoration: none;
      color: #FFFFFF;
}
a:hover {
      text-decoration: underline;
}
a:active {
      text-decoration: none;
}
-->
</style></head>

<body text="#00FFFF" alink="#00FFFF" style="margin-left: 0; margin-top: 0; margin-right: 0; margin-bottom: 0;">
<div align="center">
  <table width="745" border="1" align="center" bordercolor="#00CCCC">
    <tr align="center" valign="top">
      <td> <div align="center"><font color="#FFFFFF" size="4" face="Dauphin"><a href="index.htm">VIP
          Home</a></font></div></td>
      <td> <div align="center"><font color="#FFFFFF" size="4" face="Dauphin"><a href="Blank%20Preview%20page.htm">Preview</a></font></div></td>
      <td> <div align="center"><a href="ScreenSavers/ScreenSavers.htm"><font color="#FFFFFF" size="4" face="Dauphin">Screen
          Savers</font></a></div></td>
      <td> <div align="center"><a href="mindlessmoments.htm"><font size="4" face="Dauphin">Mindless
          Moments</font></a></div></td>
      <td> <div align="center"><a href="Biteyourtongue.htm"><font color="#FFFFFF" size="4" face="Dauphin">Bite
          Your Tongue</font></a></div></td>
      <td> <div align="center"><a href="Wallpaper/wallpaper.htm"><font color="#FFFFFF" size="4" face="Dauphin">Wallpaper</font></a></div></td>
      <td> <div align="center"><a href="My%20Closet/mycloset.htm"><font color="#FFFFFF" size="4" face="Dauphin">My
          Closet</font></a></div></td>
      <td> <div align="center"><font size="4" face="Dauphin"><a href="http://marikudla.proboards3.com">Group
          Gab</a></font></div></td>
    </tr>
  </table>
</div>
<p align="center"><img src="images/Max-Mari-straight.jpg" width="585" height="110"></p>
<p align="center" style="margin-bottom: 0;">&nbsp;</p>
<p align="center" style="margin-top: 0; margin-bottom: 0;"><font color="#FFFFFF" size="5" face="Dauphin"><strong><a href="vipmaxglitz.htm">Glitz
  and Glam</a></strong></font></p>
<p align="center" style="margin-top: 0;"><font color="#FFFFFF" face="Dauphin"><strong><font color="#00FFFF" size="4">-Exclusive
  photos from shoots you haven't seen</font></strong></font></p>
<p>&nbsp;</p>
<p style="margin-bottom: 0;">&nbsp;</p>
<p align="center" style="margin-top: 0; margin-bottom: 0;"><strong><font color="#FFFFFF" size="5" face="Dauphin">
  </font></strong><font color="#FFFFFF" size="5" face="Dauphin"><strong><a href="Cookie%20crumbs/CookieCrumbs.htm">
  Cookie Crumbs</a></strong></font></p>
<p align="center" style="margin-top: 0;"><strong>-<font size="4" face="Dauphin">Misc.
  photos I didnt know what else to do with</font></strong></p>
<p align="center">&nbsp;</p>
<p align="center" style="margin-bottom: 0;"><font color="#FFFFFF" size="5"><strong><font face="Dauphin"><a href="Blonde%20Bloopers/BlondeBloopers.htm">Blonde
  Bloopers</a></font></strong></font></p>
<p align="center" style="margin-top: 0;"><font color="#00FFFF" size="4" face="Dauphin"><strong>-It
  can't all be Glitz and Glam!</strong></font></p>
<p>&nbsp;</p>
<p align="center" style="margin-bottom: 0;"><font color="#FFFFFF" size="5" face="Dauphin"><strong><a href="In%20between%20and%20after/vipmaxinbtween.htm">The-in-Between
  and After That</a></strong></font></p>
<p align="center" style="margin-top: 0;"><font color="#FFFFFF" face="Dauphin"><strong><font color="#00FFFF" size="4">-Back
  stage, hotel, on the road, at the after party...recovery.</font></strong></font></p>
<p align="center">&nbsp;</p>
<p align="center" style="margin-bottom: 0;"><font color="#FFFFFF" size="5" face="Dauphin"><strong><a href="vipmaxfriends.htm">Friends
  and Fam</a></strong></font></p>
<p align="center" style="margin-top: 0;"><font color="#FFFFFF" face="Dauphin"><strong><font color="#00FFFF" size="4">-A
  bit of Mari's world outside of the fitness industry. Day to day, and with family.</font></strong></font></p>
<p align="center">&nbsp;</p>
<p>&nbsp;</p>

</body>
</html>


Can anyone tell me where to put it so it appears behind the words?  This has been driving me crazy for awhile.  

Im really new at this, so please explain as much as possible.

Thanks,
Cinnacracker
cinnacrackerAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
prifreConnect With a Mentor Commented:
Hi,

I have also been busy.
I have not been able to solve the problem. As I understand, the problem originates from
http://www.webreference.com/dhtml/diner/bgresize/

Now, I tried in various ways to get things working/not-working. And I have found out, that if you do use:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

nothing works...

I think the whole problem is that you are trying to use DHTML for resizing, yet start by instructing the browser that DHTML is not possible...

So - if you just remove the first line from your code, things behave better.

Regarding structuring the code, etc I think I cannot add much to the programming behind the sample page that acompanies the webreference site stuff. If necessary, check out that stuff again...

with a smile
/prifre
0
 
cinnacrackerAuthor Commented:
Ok... maybe i need to clarify.... I have the javascript code for making a background image "fit" into different screen resolutons.  But, I do not know where to put it in the page... header?  body?  how do i work it in with what code is already there?  

heres one of my pages.  http://www.marikudla.com/JoinLounge/JoinLounge.htm
I dont want the spacing to chage between resolutions.  

Thx
0
 
prifreCommented:
Hi,

generally you put JavaScript-functions in the header. If you wanna run some JavaScript as soon as the page loads, you add that to the body-tag:
<body text="#00FFFF" alink="#00FFFF" style="margin-left: 0; margin-top: 0; margin-right: 0; margin-bottom: 0;" onLoad="makeIm()">

should work in your case.

Check out http://www.w3schools.com/js/js_whereto.asp on where to put JavaScript.

with a smile
/prifre
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
cinnacrackerAuthor Commented:
Hi.  i just wanted to let you know that I did read your answer.  I have had to help my sister with a computer issue that took 2 solid days, so i couldnt get back to this.  I do want to try your suggestion though and make sure points are awareded.  Unfortunately  i cant work on this now either, but i just wanted to let you know i am still here and i will be back!
0
 
cinnacrackerAuthor Commented:
ok, im back and still havent figured this one out.  

here, i made a simpler test page.

www.marikudla.com\Happy Memorial Day.htm

as you can see, it had horizontal type centered.

The background image I am trying to put behind it is:
http://www.marikudla.com/test2.gif

when this works, Test should be centerd horizontally and vertically in all resolutions.  

something strange is happening.  If you go to the first link above, you might see just the start of the background at the very top of your window... if I go to a lager resolution, I can see more of it there.  but if i refresh that resolution, it almost dissapears... must have something to do with the script...

it seems to stay centered horizontaly, but whats going on with the vertical?

anyone?


Here is the code if you need:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.style1 {
      font-size: xx-large;
      font-weight: bold;
}
body {
      background-image: ;
      background-color: #0033CC;
}
-->
</style>
</head>
<body>
<script language="JavaScript">
function makeIm() {
NS4=(document.layers);
IE4=(document.all);
scaleWidth = true;
scaleHeight = true;
imSRC = "http://www.marikudla.com/test2.gif";
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;center: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>";
document.write(imStr);}
makeIm();
</script>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div align="center" class="style1">
  <div align="center">Happy Memorial Day!
  </div>
</div>
</body>
</html>
0
 
prifreCommented:
For sample code, of course check out:
http://www.webreference.com/dhtml/diner/bgresize/example.html


/prifre
0
 
cinnacrackerAuthor Commented:
http://www.marikudla.com/Happy%20Memorial%20Day.htm

You my dear are a genius!  Worked like a charm.  Thx!  This is really going to allow me to spruce up my website.   This has been bugging me for a long time!

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.