stretch table to width of screen/image

Ok, I'm trying to do this but just can't figure out how.  I need some experts to help.  On my webpage, I'm displaying a background image that repeats (repeat-x) across the browser.  Now I have a table that I want to stretch 100% to the width of the screen.  But I need to place an image in that cell but because it's an image I don't want to stretch it.  How can I 1.) detect the screen resolution and 2.) stretch the table to that width but not pixelate that image?  Any ideas experts?
COwebmasterAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

JaaxArchitectCommented:
Have your table named as "tbl1"

<table id="tbl1">
....
</table>

In your body tag

<body onload="setTableSize()">

</body>

In your script

<script>
...

      function setTableSize(){
        tbl = document.getElementById("tbl1");
        tbl.style.width = screen.width;
        tbl.style.height = screen.height;
      }

..
</script>
0
sankar_raviCommented:
Hi,

If you place an image in a cell, that doesn't stretch to the table width. By default if you say width="100%" and height="100%", table will stretch to the screen resolution. Here there is no need to calculate the screen resolution.

If you still need calculations....psb.
<html>
<head>
      <title>Untitled</title>
      <script language="JavaScript">
            var w,h;
            w=screen.width;
            h=screen.height;
            alert(w+"--"+h);
            function check(){
                  var obj=document.getElementById("tb1");
                  alert(obj.width+"---"+obj.height);
                  obj.width=w;
                  obj.height=h;
                  alert(obj.width+"---"+obj.height);
            }
      </script>
</head>

<body onload="check();" bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0">
<table id="tb1" border="1" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/amitabh1.gif" alt="" border="0"> </td><td>&nbsp;</td>
</tr>
</table>

</body>
</html>
0
COwebmasterAuthor Commented:
Ok, but my problem is is that my image is 800px wide.  If the user has a width of 1024, then the image needs to swap out with an image that is 1024px wide.  how can I toggle between the various image widths?
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

dgrafxCommented:
so you want the table to be the width of users screen and the hieght of users screen - is that correct?
If yes then as stated above - just use
<table style="width:100%;height:100%;">

Then to get the correct image you'll need a set of images that are named what their size (width) is.
for example you'd have 800.jpg and 1024.jpg and 1280.jpg et cetera.

Also give the table an id and that should be it:
<table style="width:100%;height:100%;" id="tb1">
<tr><td>hello</td></tr>
</table>
<script>
document.getElementById('tb1').style.backgroundImage='url(/images/'+screen.availWidth+'.jpg)';
document.getElementById('tb1').style.backgroundRepeat='no-repeat';
document.getElementById('tb1').style.backgroundPosition='center center';
</script>

good luck ...
0
sankar_raviCommented:
Hi,

In order to solve the problem of swapping the images...
<html>
<head>
      <title>Untitled</title>
      <script language="JavaScript">
            var w,h;
            w=screen.width;
            h=screen.height;
            alert(w+"--"+h);
            function check(){
                  var obj=document.getElementById("tb1");
                  alert(obj.width+"---"+obj.height);
                  obj.width=w;
                  obj.height=h;
                  alert(obj.width+"---"+obj.height);
                  if(w==800)
                       document.images["celImage"].src="800image.jpg";


            }
      </script>
</head>

<body onload="check();" bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0">
<table id="tb1" border="1" cellpadding="0" cellspacing="0">
<tr>
<td><img name="celImage"  src="images/amitabh1.gif" alt="" border="0"> </td><td>&nbsp;</td>
</tr>
</table>

</body>
</html>
0
sankar_raviCommented:
sorry for incomplete posting...

  if(w==800)
                       document.images["celImage"].src="800image.jpg";
else if(w==1024)
          document.images["celImage"].src="1024image.jpg";
etc...
Based on the resolution, you can assign an image.

If it's not clear, please let me know,

Thanks
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Servers

From novice to tech pro — start learning today.