Watermark Background Image Script Question

[eheileson]

Question on Watermark Background Image Script
http://www.dynamicdrive.com/dynamicindex3/fixback.htm

I have placed a statically positioned watermark on my school basketball site, but would like it to appear lower on the page. Is there a way to do this? The web address is:

http://eteamz.active.com/balloubruinsbasketball

I would like the basketball to start below the blue line. I am new to Dhtml so be gentle!

Thanks in advance for your help.

The code for the opening page is:

<script language="JavaScript1.2">
/*
Watermark Backgound Image Script- © Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more DHTML scripts, and TOS,
visit dynamicdrive.com
*/

if (document.all||document.getElementById)
document.body.style.background="url(http://eteamz.active.com/balloubruinsbasketball/files/Ballou_background4.jpg) black lower right no-repeat fixed"
</script>
<font color="#9BCD9B" size=1 ><center><b>This site best viewed at 1024x768</center></b>
</font>
<script language="JavaScript1.2">
/*
Nudging text by Matthias (info@freejavascripts.f2s.com)
Modified by Dynamic Drive to function in NS6
For this script and more, visit http://www.dynamicdrive.com
*/
//configure message
message=" BALLOU BRUINS GIRLS BASKETBALL"
//animate text in NS6? (0 will turn it off)
ns6switch=1

var ns6=document.getElementById&&!document.all
mes=new Array();
mes[0]=-1;
mes[1]=-4;
mes[2]=-7;mes[3]=-10;
mes[4]=-7;
mes[5]=-4;
mes[6]=-1;
num=0;
num2=0;
txt="";
function jump0(){
if (ns6&&!ns6switch){
jump.innerHTML=message
return
}
if(message.length > 6){
for(i=0; i != message.length;i++){
txt=txt+"<span style='position:relative;' id='n"+i+"'>"+message.charAt(i)+"</span>"};
jump.innerHTML=txt;
txt="";
jump1a()
}
else{
alert("Your message is to short")
}
}

function jump1a(){
nfinal=(document.getElementById)? document.getElementById("n0") : document.all.n0
nfinal.style.left=-num2;
if(num2 != 9){
num2=num2+3;
setTimeout("jump1a()",50)
}
else{
jump1b()
}
}

function jump1b(){
nfinal.style.left=-num2;
if(num2 != 0){num2=num2-3;
setTimeout("jump1b()",50)
}
else{
jump2()
}
}

function jump2(){
txt="";
for(i=0;i != message.length;i++){
if(i+num > -1 && i+num < 7){
txt=txt+"<span style='position:relative;top:"+mes[i+num]+"'>"+message.charAt(i)+"</span>"
}
else{txt=txt+"<span>"+message.charAt(i)+"</span>"}
}
jump.innerHTML=txt;
txt="";
if(num != (-message.length)){
num--;
setTimeout("jump2()",50)}
else{num=0;
setTimeout("jump0()",50)}}
</script>
<h2><center><div id="jumpx" style="color:#228B22"></div></center></h2>
<script>
if (document.all||document.getElementById){
jump=(document.getElementById)? document.getElementById("jumpx") : document.all.jumpx
jump0()
}
else
document.write(message)
</script>
<font color="#BABABA">Ballou Junior High offers 7th, 8th and 9th grade girls the opportunity to participate in the interscholastic sport of basketball during the S.P.S.L. fall/winter sports season. Tryouts usually occur during the first week of November (there are no tryouts for 7th grade) and the season continues through the month of January. Competition occurs with other schools in the S.P.S.L. "Sound" Division for Junior High. These schools include the : Aylen Falcons; Curtis Cougars; Columbia Cougars; Edgemont Eagles; Ferrucci Cougars, Kalles Tyees; and the Stahl Storm.
</font>

[jscheuer1]

This is one of a handful of scripts here on DD that I have almost always taken exception to as, no script is required for this effect. It is really plain css style. I'd get rid of the script altogether and add this (additions red) to your existing on page stylesheet:


<style type="text/css">
body {
background:url('http://eteamz.active.com/balloubruinsbasketball/files/Ballou_background4.jpg') black 100% 330px no-repeat fixed;
}
.GoogleSearch
{
font-family : Arial;
font-size : 10pt;
color : #000000;
}
</style>

[eheileson]

Thanks John,

But I'm still a bit confused...taking the script out is no problem, but I'm not familiar with stylesheets...where do I place the code you suggested? The script also creates the black background...is there css code to replace that also? Sorry...I'm still learning.

Thanks for your help...Happy Thanksgiving

[eheileson]

Whoops...disregard the background color question...I missed it in your code. Still need to know where to place your code though.

Thanks

[jscheuer1]

Open your html file in a text editor like notepad. Use the find utility, in notepad, just hit the F3 key. Search for:

</style>

You will be taken to this bit of code:


<style>
.GoogleSearch
{
font-family : Arial;
font-size : 10pt;
color : #000000;
}
</style>

Make it look like this:


<style>
body {
background:url('http://eteamz.active.com/balloubruinsbasketball/files/Ballou_background4.jpg') black 100% 330px no-repeat fixed;
}
.GoogleSearch
{
font-family : Arial;
font-size : 10pt;
color : #000000;
}
</style>

Make sure the script is removed as well, then save the file.

[eheileson]

Hi John,

Thanks for your help. I figured out what I was doing wrong. The Eteamz site is a template driven site...so you found the code via view source. Eteamz allows me an area within the template to change with html. That is the code above. They won't let me change the template and that is where the style sheet is, so I am back to try to find out how to manipulate the Watermark Background Image Script to lower the image. Thanks for your help and time...the good news is that I have learned alot about stylesheets trying your suggestions...something I will surely use in another venture.

[jscheuer1]

Well, you can put this stylesheet anywhere on your page that you are allowed to edit:


<style type="text/css">
body {
background:url('http://eteamz.active.com/balloubruinsbasketball/files/Ballou_background4.jpg') black 100% 330px no-repeat fixed;
}
</style>

As long as it is above the </body> tag near the very end of the page.

[eheileson]

Thanks John...shes fixed

[eheileson]

End of thread