If you are seeing this message, it is possible the page did not load properly. Please hit reload/refresh on your browser.
If you still see this message, you probably do not have a browser that supports web standards, although its content is accessible to any browser or Internet device.

Cool Tips & Tricks Cool Tips & Tricks

Help Communities:
Help Forums Bug Base
<< Prev Topic | Next Topic >>
Cool Tips & Tricks ::: Javascript FAQ ::: Screen resolution specific backgrounds
New Topic    Add Reply
Topic: Screen resolution specific backgrounds  (?)  Click to receive email notification of replies Click to stop receiving email notification of replies email this topic to a friend
chrish18

Registered User
ezSupporter
Posts: 2254
Posted: 11/9/05 6:48 am    
Screen resolution specific backgrounds
This script cant automatically stretch images (that is beyond the scope of javascript), but you can use javascript to change the background image depending on the users screen resolution. Simply put this in box 1
 
<script type="text/javascript">
/* begin resolution specific backgrounds */
var bg_big = "http://www.site.com/images/bg1.jpg";
var bg_1024_768 = "http://www.site.com/images/bg2.jpg";
var bg_800_600 = "http://www.site.com/images/bg3.jpg";

/* dont edit past here */
document.write("<style type=\"text/css\">\n");
document.write("body {background-image: url(");
if (screen.width > 1024 && screen.height > 768)
{
   document.write(bg_big);
}
else if (screen.width <= 1024 && screen.width > 800 && screen.height <= 768 && screen.height > 600)
{
   document.write(bg_1024_768);
}
else if (screen.width <= 800 && screen.height <= 600)
{
   document.write(bg_800_600);
}
document.write(");\n");
document.write("</style>\n");
/* end resolution specific backgrounds */
</script>
Change the variables in colour - The red url is the background for screen resolutions bigger than 1024 x 768, the blue url is for resolutions at 1024 x 768 (this is probably the most common resolution around), and the green url is for 800 x 600 and below.

Your best bet is to have a standard image for 1024 x 768 (or larger) and then resize the image in a graphics program such as Photoshop, Paint Shop Pro, or a free program such as GIMP


  reply to this message

Click to receive email notification of replies Click to stop receiving email notification of replies email this topic to a friend

New Topic    Add Reply

jump to:
Topic Control Image::: Topic Commands
<< Prev Topic | Next Topic >>

Icon Legend

reply button:::Reply to Post Button   edit button:::Edit Post Button  delete button:::Delete Post Button (Moderator Only)

subscribe/unsubscribe to thread button:::Subscribe to Thread Button   email to friend button:::Email to Friend Button  



- Cool Tips & Tricks - Javascript FAQ -

Communitiesezboard Help Communities:

Help Forums Help Forums Bug Base Bug Base





Powered By ezboard® Ver. 7.32
Copyright ©1999-2007 ezboard, Inc.