Justifying static Images on background [Archive]

Click to See Complete Forum and Search --> : Justifying static Images on background

Protous

02-12-2003, 12:09 PM

Hey all,

Question for you, this one is a noodle scratcher at least for me.

I am running this script:

<script language="JavaScript1.2">
if (document.all)
document.body.style.cssText="background:white url
(images/ca6.jpg) no-repeat fixed center top"
</script>

Now i want to be able to justify it so that it will resize the image depending on the res of the monitor/ size of the window. Example>> www.cacenter.com the middle C in the main frame i want to be able to see the whole thing no matter what size the window or res of the screen.

Thanks in advance

Jona

02-12-2003, 12:18 PM

if(screen.height=="640") { //continue code
} else if(screen.height<="639") { //continue coding for large screens
} else if(screen.height=="800") { //continue coding for 800 height screens
} else if(screen.height=="1024") {//continue coding for 1024 pixel height screens
}

You can take out all of the else's, and just use if's. And I may have height mixed up with width..

Protous

02-12-2003, 01:15 PM

Do you have an example i can look at i am new to javascripting, Thanks BTW

Jona

02-12-2003, 01:21 PM

Certainly, go to www.jagged-rocks.bravepages.com/usrjscripts/dynamicusrpage.htm

In that page type in <script>, then paste in the code I gave you, then type in </script>, and press the button (not copy-to clipboard one). That will open a new window and show you the script's effect. Change your screen resolution for each different effect, and make sure that you take out the comment tags and that you place your own code (like, "alert('You are using'+screen.height)") there instead.

Protous

02-14-2003, 08:56 AM

OK I have the script:

<script>
if(screen.height=="480") {
imgfile = "images/ca1.jpg"
} else if(screen.height=="600") {
imgfile = "images/ca3.jpg"
} else if(screen.height=="768") {
imgfile = "images/ca4.jpg"
}
if (document.all)
document.body.style.cssText="background:white url ("+imgfile+") no-repeat fixed center top"
</script>

and it still is not pulling the picture up. I Not sure what else to try

gil davis

02-14-2003, 09:01 AM

The screen.height is a number, not a string. Take the quotes off of the numbers.

pyro

02-14-2003, 09:32 AM

Also, you may want to consider coding it like this, in case someone browses to your page with a resolution other than the three your specified...

if(screen.height <= 480) // if height is 480 or less
{
imgfile = "images/ca1.jpg";
}
else if(screen.height == 600) // if height is 600
{
imgfile = "images/ca3.jpg";
}
else if(screen.height >= 768) // if height is 768 or greater
{
imgfile = "images/ca4.jpg";
}

Protous

02-14-2003, 09:40 AM

Ok did that now getting error that there is "object required"
line 17 Char1

line 17 is:
document.body.style.cssText="background:white url("+imgfile+") no-repeat fixed center top"

pyro

02-14-2003, 10:06 AM

Your line 17 should look something like this:

document.body.style.background = "white url("+imgfile+") no-repeat fixed center top";

Protous

02-14-2003, 10:45 AM

I ended up kionda starting over here is the script that i am using now and it works!! so give it to whoever may need it in the future it will use 3 different back grounds depending on the screen rez. the back grounds are static so the text scrolls but the back ground does not.

thanks again for all your help guys you all rock!!

//This script switches the static background depending on the
//screen rez. thanks to everyone who helped
<script>

</script>

<body bgcolor="select color or remove" text="select color or remove" onLoad="SetBackground()">