Background Resize

Does anyone have the javascript for a background to resize? I want my background to resize to 1024x768 if the visitor has resolution 1024x768, to 800x600 if the resolution is 800x600 etc. Greets, ExplosioN

Comment/Reply (w/o sign-up)

oh I forgot to add, is it possible to make limits on it? Like the image won't resize anymore if the resolution is smaller then 800x600?

Comment/Reply (w/o sign-up)

I think you can do it w/o javascript. Just make one for 1024x768, but make it so if it were to be seen in 800x600, it wouldnt be noticable. I've seen it done before. The layout would have to be aligned to the left, while the background would take care of the right side.

Comment/Reply (w/o sign-up)

You can't resize the background image, it'll only display at its full size, but you can serve up different images based on the browser size.
Use My Google to find a script that works for you.

Comment/Reply (w/o sign-up)

If you find the site could you please tell me to as I would like to know how to do this too. I'll join the search for this script too.

Comment/Reply (w/o sign-up)

Here is the answer that has evaded you X2! Your welcome.
Background Resize

There iare numerous ways this can be done.  Make sure on either method to change the image to your background of course.   Here are two different ways I just happen to have in my documents at the moment:

<script language="JavaScript1.2">

if (document.All||document.GetElementById)
Document.Body.Style.Background="url('YourIMG.Jpg') white center no-repeat fixed"

</script>
 

As you probably figured the script goes at the start of your body (inside of the body tags of course).

This is actually ment to give you a watermark effect so your background doesnt scroll but it will also work for your resizing issue.   Here is another way to do it using div's:

<div style="position:absolute; width:100%; height:100%; margin:0px; padding:0px; left:0px; right:0px;z-index:1">
 <img src="YourIMG.Jpg" width="100%" height="100%"></div>

<div style="z-index:2; position:absolute; margin:0px; padding:0px; height:100%; width:100%; overflow:scroll;">

<p>&nbsp;</p>
<p>THIS IS THE CONTENT</p>

</div>

-reply by Eric Backer

 

 

 

 

Comment/Reply (w/o sign-up)

I dont remember coming across a javascript that enable to you to detect the screen resolution. I would like to know if there is one. As suggestion, why not create a website with a liquid width? In that case, you need not worry abt the screen resolution of your users.

Comment/Reply (w/o sign-up)