Solved

Background image with perfect fit in window...?

Posted on 2002-03-19
17
492 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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 100 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
The viewer will learn how to count occurrences of each item in an array.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

803 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