Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Background image with perfect fit in window...?

Posted on 2002-03-19
17
Medium Priority
?
526 Views
Last Modified: 2011-09-20
I want to use a background image for an html page.  Simple so far.  Now, I want this image to perfectly fill the screen in any browser, any monitor size...within reason of course.  Can a script accomplish this?  Would it be easier not to use it as a background but simply as an image like any other?
0
Comment
Question by:wec012299
  • 4
  • 3
  • 2
  • +5
17 Comments
 
LVL 19

Expert Comment

by:cheekycj
ID: 6880985
one thing I can think of but I am not sure that it will work.

Use JS to detect screen size and then write the body tag with the appropriate image (you will have to have an image for each possible screen resolution.. or atleast the common ones)

CJ
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6881091
OR...

use multiple style sheets and use detection of the sizing to decide which style sheet to bring in.  If you want to support multple sizes, you probably have other layout issues as well, and they could all be addressed with the style sheet, and the only scripting you need is to detect size/resolution and generate the style tag.

Cd&
0
 
LVL 30

Expert Comment

by:weed
ID: 6881894
Just set the "size" of the image in the HTML tag to 100% x 100%.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6882517
Weed,

That will distort the image, and the image would have to go into a layer.
You can't set the size on a background image.  It would work as long as
the layer is absolutely positioned at 0,0 and is the first element in the
page, but you would also need to set all the body margins to zero to get
it to the edges like a real background.

Cd&
0
 
LVL 30

Expert Comment

by:weed
ID: 6883099
The ammount of distortion would depend on the image. A very light knocked back image with few details would scale nicely without being noticeably grainy.
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6883305
However, a very light knocked back image with few details would also tile well.

wec, you can't do what you want. That's not how it works. You're NEVER going to be able to adjust the image for every possible browser window size. Pick one, and optimize the page for that.

You could also set everything in a table, give the TABLE the background image, and adjust the table until it fits the way you want. It takes some minor fixing to make it work for Netscape, but it can work.
0
 
LVL 12

Expert Comment

by:lexxwern
ID: 6885063
Itwas said earlier,
"Use JS to detect screen size and then write the body tag with the appropriate image (you will have to
have an image for each possible screen resolution.. or atleast the common ones)"

im not sure if thats possible, but im not 100% sure if that is possible or not.

so i ask is that possible cheekycj?

lhn
0
 
LVL 19

Expert Comment

by:cheekycj
ID: 6885995
something like:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
     <title>TEST page</title>
</head>
<script>
<!--
     if (screen.width<=640)
          document.write('<BODY background="bgImage_640x480.gif">');
     else if (screen.width<=800)
          document.write('<BODY background="bgImage_800x600.gif">');
     else if (screen.width<=1024)
          document.write('<BODY background="bgImage_1024x768.gif">');
     else if (screen.width<=1600)
          document.write('<BODY background="bgImage_1600x1200.gif">');
     else
          document.write('<BODY background="bgImage_default.gif">');
//-->
</script>
test this page!!!
</body>
</html>
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6889494
That should work... though you'll have to design all those images, because the ratios are not the same (640x480 doesn't size up to 800x600, or 1024x768, or 1600x1200 -- nor does any of the others size up to the proper proportions).

It also doesn't help if my browser window is set to, say, 900x480, or 743x645, or any one of the millions of possible window sizes.

But it's a start... ;-)
0
 
LVL 1

Accepted Solution

by:
aahzman earned 400 total points
ID: 6889918
Hi there,

Why not resize the browser window to be the same size as the image, rather than trying to do anything with the image?

I use this method for one site (I just resize the width), and still leave it so that the user can resize their browser if they wish.

An example is:

     <script language="Javascript">
     <!-- //
          // resize
          if (document.layers || (document.getElementById && !document.all))
          {
               if (navigator.appVersion.indexOf("Macintosh") > -1) window.innerWidth = 692;
               else window.innerWidth = 700;
          }
          else if (document.all)
          {
               if (navigator.appVersion.indexOf("Macintosh") > -1)
                    window.top.resizeBy(692-window.document.body.clientWidth,0);
               else
                    window.top.resizeBy(682-window.document.body.clientWidth,0);
          }
     //-->
     </script>

And I do that on the first page only.

What I also do is use style sheets to no tile the background image and to also keep it fixed, such as:

body
{
     margin-left : 0;
     margin-right : 0;
     margin-top : 0;
     margin-bottom : 0;
     margin : 0 0 0 0;
     background-repeat : no-repeat;
     background-attachment : fixed;
}

Seems to work well for my needs, and could be something you could develop on easily.  Obviously you wouldn't want to alter the browser size lager than the resolution allows, so a quick check for resolution size wouldn't go amiss either.

Andy
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6889933
Andy, that sounds like a good compromise. Should degrade pretty well too, for NN4+ and others that don't support the fixed attribute for the background image.

Wec, I think you've gotten about all the options there are...care to make some response?

However, since we haven't heard a peep since the question was posted, it may be a lost cause. ;-)
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 6890115
Probably true:

Questions Asked 25
Last 10 Grades Given B A A B B A A B B B  
Question Grading Record 18 Answers Graded / 19 Answers Received

The oldest open Q is only 16 months old, so it should not take long. :^(


Cd&
0
 

Expert Comment

by:bignosegonzo
ID: 7007636
I did this for a site ages ago:

http://www.inter-lead.net/

Which I believe has the effect you're looking for.  I'm not the original author of the code (at least I don't think I am and I can't remember where I got it from) but it should work in most browsers.

It won't work in NS4 if the user resizes the window, but you could add a window.onResize = window.reload() somewhere for NS.

You can obtain the source code by right-click view source etc... it's pretty straightforward.

Good Luck.
0
 

Expert Comment

by:bignosegonzo
ID: 7007641
Supplementary:

By the way, I put it in a Frame to get rid of the scrollbars which appear.  The code is actually writing a layer (div) which sits behind everything else and this layer is usually bigger than the other content (due to the proportions of the browser and image being different).
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7048013
This question has been abandoned. I will make a recommendation to the
moderators on its resolution in a week or two. I appreciate any comments
that would help me to make a recommendation.

Cd&

0
 
LVL 1

Author Comment

by:wec012299
ID: 7048289
Thanks aahzman, I think that's the best solution.
0
 
LVL 1

Expert Comment

by:aahzman
ID: 7048653
Thanks very much :)
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

916 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question