Fit background image to table size

I am reasonably sure that is quite impossible just using HTML, I would love it if anybody had a solution.

sina
london

Is it really impossible?? From the little search i did on the net i got the impression that CSS lets you do it. The only problem is i am unable to find the right code on the net.

My webpage (web.njit.edu/~ras5) has a section of pics where i am using a wallpaper as a background for my page.But the background image is 800x600 and on a higher resolution screen it shows. The problem with this method is that the background image file size is big due to higher resolution.

So i then tried using a table and using a background picture with smaller resolution as mentioned abovefor the table so that it stretches but i was unable to achieve the effect and got tiles.

It's not possible. YOu can't specify the size of background images. If the page is too small you don't see the entire image, and if it's larger the image tiles. That's what backgrounds do.

You CAN set it as a fixed background, which won't tile OR stretch. Or you can put it as a layer with everything else over it, which serves pretty much the same purpose.

I don't understand why you want to stretch it anyway -- it will get distorted. Possibly VERY distorted. Distorted images do not improve the look of your site.

Make it a size and stick with that. If you don't want it to tile, set it as a fixed background.

If you want to know what IE can do with tables, then check MSDN. In general, this is the place where I spend at least an hour of my day.

http://www.msdn.microsoft.com/workshop/author/dhtml/reference/objects/table.asp

I have a couple of questions.

one - What is the page size of your document...is it to be viewed at 800 by 600 or at 1024 by 768?

two - From what you are saying the table is to take up the whole page in width.  Is this correct?

There are several ways to approach this but the correct way depends on how you wish to present the table.

RDAdams, here is what i am trying to do-

Since i do not want plain colors as a background for my page, i am trying to use wallpapers as background.
I also want to keep the background as a watermark and in the CENTER of the page( which is determined by resolution).  

Now since the background property for a page does not have any height or width properties i was trying to use a table to cover the page and then let the table control width and height of the wallpaper image .... with the image being the background.

Webwoman rightly mentioned there will be distortion if images stretch. But i think that some distortion is tolerable for some images as i have already faded the background and they are not really distracting to the eye...... yet they seem to give a nice look to the page.
 
The commonly used resolutions on the net are 800x600 and 1024x768.
i was hoping to use a 800x600 image as a background (because its size is less than a 1024x768 image by several bytes) and if somone viewed the page on a 1024x768 screen then i was hoping that the table would stretch the bakground to those dimensions... with little but not large distortion.

So that is why i was trying to make a table with a bakground fit the whole page , and then in this table i could make another table to put content such as text or pictures. When i experimented with smaller image resolution like 500x375 i got tiling and hence was trying to experiment on how to prevent tiling.

If you go to the pics section on my website (web.njit.edu/~ras5) you will get an idea of what i am trying to do.

thanks,
Ranjit

How about using Javascript to check the resolution and either write the 800x600 file or the 1024x768 depending on that?

I think that is a plausible solution since with pure html is impossible to do what you want.

Just one more thing ... if you strech your watermark ... it may not look good.

You have to think that there are users using 1280x1024 ... and that it ain't proporcional.
1280x960 is the proporcional resolution mode... but most users use 1280x1024 (nice round number!).

There are plenty more unproporcional resolutions.

Your watermark wouldn't be correct in those resolutions.

Well yes i guess i may have to use Javascript to check for resolution and then accordingly have the right image file downloaded.

The only drawback is the file size will still be large and the page would download slowly.

Anyways this is just experimentation with different possibilities.

Ok, below is the code for a page that will use the base layer of the document, and draw a specified image to the exact dimensions of the browser window. Then on top of that, I have placed a layer that will float above the background, which allows you to layout your main content anyway you desire.

<html>
<head>
     <title>background experiment</title>
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" onLoad="textWidth()">
<script language="JavaScript">
<!--
if (parseInt(navigator.appVersion)>3) {
 if (navigator.appName=="Netscape") {
  width = window.innerWidth;
  height = window.innerHeight;
 }
 if (navigator.appName.indexOf("Microsoft")!=-1) {
  width = document.body.offsetWidth;
  height = document.body.offsetHeight;
 }
}
document.write('<img src="background-image.jpg" width=' + width + ' height=' + height + '>');
-->
</script>
<div id="myID" style="position:absolute; left: 0px; top: 0px; visibility: visible; z-index: 1">
put your text here
</div>
</body>
</html>


As far as skewing the image goes, you could always modify the script used so that if you know the proportion of the image (for example, the image is 2 times high as it is wide), the image won't skew. The new declaration in this case would be:

document.write('<img src="background-image.jpg" width=' + width + ' height=' + (2 * width) + '>');


hope this helps :)
Tom Connolly

hmm,

well this one centers an image in the background of a page and stretches dynamically without using JavaScript -- but using percentages. This may be a drawback.
Just change the image src.
The nice colors are simply to show the effect.

<html>
<style type="text/css">
#backPic {
  z-Index:0;
  display:block;
  position:absolute;
  display:block;
  left:20%;
  top:20%;
  width:60%;
  height:60%;
}
#tbl {
  display:block;
  z-index:2;
  position:absolute;
  display:block;
  left:20%;
  top:20%;
  width:60%;
  height:60%;
  border:2px solid red;
}
h1 {color:red;}
</style>
<body>
<img src="story_files/klamath-refuge-6.jpg" id="backPic">
<table id="tbl"><tr><td><h1>I'm in the center</h2></td></tr></table>
</body>
</html>

CirTap

PS:
just to let you know alittle issue: I used a similar page with a 100% picture with with a nice gradient on another (slower) machine: it easily crashed the browser/videocard on constantly resizing the window.

just re-read your question:
> table with height and width as 100%
in this case change #backPic to have
top:0px, left:0px; width:100%; height:100%;

CirTap

First, if you want the graphic to always be the same size, change your table width and height to something fixed (preferably no larger than the smallest settings your viewers will have. I tend to stick to no wider than 800 pixels for those poor souls still at 800x600. If you want the graphic to fill that space remake it the size of the table. If you want it to be the same size it is but not repeat try this:

<TABLE width="GRAPHICWIDTH" HEIGHT="GRAPHICHEIGHT">
<TR>
<TD width="100%" valign="top" background="graphic.jpg" style="background-repeat: no-repeat">STUFF</td>
</tr>
</table>

@BHaines: you should read the entire question not just the heading ;-)

> How do i make the background image **stretch** to fit
> the table??? [...] a single image **stretched** as per
> resolution or size of the screen as the table does the same

CirTap

Put the image in a <div> layer with a very low z -coordinate.  Make the <div> have the "position:absolute" parameter and the correct coordinates to line up with the table. Then, put the table directly over the layer and voila!

<DIV style="position:absolute; z-index:12; right: 0%; left: 0%; top: 0px; "><IMG height=235 src="pictures/logobgL.gif" width=100% border=0></div> <your table here that lines up with the layer goes here>

Sorry, forgot to mention that if you have trouble lining up your table to the other layer, you can make that in a layer directly above it with the same dimensions except a higher z-index (ie 13)

HI,

I had been busy and did not get a chance to try out the codes until now.

Anyways i used a wallpaper with resolution 640 x 480 and tested the pages on the resolutions 800x600 and 1024x768.
Here is what i got.
----------
Cirtap,

I used the CSS code given by you and the page is at-
http://web.njit.edu/~ras5/trial1.html

The code does stretch the image to fit the window in a nice manner.

The effect is good except that as you scroll down on the page you observe that
1) the background picture does not cover the whole table,it only stretches to fit the window.If you scroll down you will observe some pictures are on a white background!
2) the nice red border does not seem to appear at the bottom

By the way when i see the page locally on my PC i DO NOT get a  white margin on the right side of the page....but as you can see the page on the website  .... it has a white margin on the right side after the red border. Any ideas why is that?

Any possible work arounds to the above problems?
------------
tconnolly,

I tried the javascript code submitted by you and the page is at - http://web.njit.edu/~ras5/trial2.html

The code does achieve the stretching but it causes a horizontal scroll bar to appear.
And when the window is resized the background image does not resize to fit the new dimensions.
Also this code does not cover the entire page but covers the window only.
Any further suggestions?
------------
Face0

I am sorry but i was not able to get the exact effect with the code you gave.

Hi Ranjit,

1. I receive two errors in MSIE5.5 on your present homepage
  "Class not registered"
   line 43, in MainPage.html
   and line 67

2. in test1.html, the <div style="text-align:center"> around <table id="tbl" ...> has no effect as the table has a width of 100%, so it is "centered".

Talking about 100%:
There's a little misunderstanding in 100% table height :-)
A height of 100% always equals the window height.
Because you "flooded" the inner table with more content that would fit into 100% of the window, the browser adjusted the table's height, and this makes 100% window != page/body-height.

Back to your bg-image.
I think you cannot do this using CSS only, so you'll need some script. tconnoly's script did not include a resize-handler that's why nothing happens, but you do not necessarily need the typical resize-fix we all once used in the last millenium to make buggy NS4 do what we want.

How 'bout comming to a visual compromise?
 - in CSS2 "compliant" browsers (Opera7, Moz1+, NS7+) it'll mimic a full-sized window background attachment
 - in MSIE 5+ the image will stretch and distort in height, but this you aleady accepted

Here's the code to do so. Just replace the stuff you have in test1.html:
<style type="text/css">
#backPic {
 z-Index:0;
 display:block;
 position:absolute;
 display:block;
 left:0%;
 top:0%;
 width:100%;
 height:100%;
}
/* make it sticky in non MSIE 5/6 */
html>body #backPic {
    position:fixed;
}
#tbl {
 border:2px solid red;
 display:block;
 z-index:2;
 position:absolute;
 left:0%;
 top:0%;
 width:100%;
 /* for CSS2 browsers */
 min-height:100%;
}
h1 {color:red;}
</style>
<script language="JScript">
<!-- /* MSIE only JScript !! */
function fixBgImage() {
 if (document.all.backPic.style.setExpression) {
  document.all.backPic.style.setExpression("height","document.all.tbl.offsetHeight");
  document.recalc();
 }
}
ie5 = (document.all && document.getElementById && !document.fireEvent)?true:false;
ie55= (ie5 && document.fireEvent && !document.createComment)?true:false;
ie6 = (ie5 && document.fireEvent && document.createComment)?true:false;
if (!window.opera && (ie5 || ie55 || ie6)) onload=fixBgImage;
// -->
</script>

#backPic is the same as before, but in #tbl I removed the height:100% and used the CSS2 min-height instead. Load the file in Mozilla 1.2+ to see the difference with the red border.

html>body #backPic is something MSIE <= 6 will not understand. It'll fix the image which takes up the full size of the window. Similar to "background-attached:fixed" it will not scroll with the content.

The JScript - NOT JavaScript - is for MSIE only, Unfortunately Opera (7?) reads it as well, so there are some general object-sniffers, to limit it to MSIE5 - MSIE6.
The script uses dynamic expressions, a MSIE-only feature, to change image.style.height according to the page-height.
I used document.all on purpose to mark it clearly as MSIE only code.

Good luck
CirTap

Hi CirTap,

I am surprised you got an error on the Main Page because i have opened the webpage in almost all versions of IE and also in Netscape. I never got an error earlier. Did u see if the error comes with any other browser too?

I did replace the code with what you gave above but i did not see any difference. Can you please see the page code at :

http://web.njit.edu/~ras5/trial4.html

and tell me if there is some correction to be made in the way i tried to implement it?

Thanks,
Ranjit

HI Cirtap,

It seems to work perfectly! Thanks a lot!!!

I doubled the points!! :)

The test page with the new code is at-
web.njit.edu/~trial4.html

I just have one question....any idea how the effect would look on IE 4.0 ? I don't have any machine with that browser version.

Ranjit

Hi Ranjit,
thank you for the extra points :-)

it should look and work the same, as you are actually using the "old" MSIE4 syntax.
As of MSIE5+ the syntax has changed and is now supposed to start with "Microsoft.DirectX.bla.filtername" (or similar). MS introduced some new filters but only available with this new syntax and only in IE5 up and probably related to some version of DirectX being installed with IE5.

it was a pleasure to "read" you :-)
CirTap

PS: I reinstalled DirectX and now I can see the transitions. So the script error was related to my buggy machine.

I've created a new question with 125 point value based on this problem, please see
https://www.experts-exchange.com/questions/20623711/Fit-background-image-to-any-size-table-cell-NEW.html

Hi cirtap,

I have a new requirement related to your solution to stretching the background picture to window size. This time i am trying to use that effect along with the effect of text pop up on MouseOver and i am unable to do so.

The question is posted at -

https://www.experts-exchange.com/questions/20669465/Text-pop-up-on-MouseOver-along-with-fitting-background-image-to-window.html

Thanks,
Ranjit

Just a note to everyone looking for the same solution described above and code............my web page address has changed and the trial webpages are also located at the new location.

The new site is http://ranjit.homeunix.com/

The trial webpages referred above are -
 http://ranjit.homeunix.com/trial1.html
 http://ranjit.homeunix.com/trial2.html
 http://ranjit.homeunix.com/trial4.html

The code has been used in the pictures section and i have achieved the desired effect.

I do get emails once in a while for details on the use of the javascript code. Right click on the webpage and select "view source". Copy the code from there. If you have further problems then you may contact me.

Your all gods to me... I have been trying to figure out how to do this for ages, thank you so much.

I would like to add that everyone did put in very useful inputs. But the main dude who completely got together the effect and necessary solution is CIRTAP!! :)

Cirtap you would like to know that ever since i implemented your solution i have had over 10-12 people (mainly amateurs like me) asking about the code!!

due to the repeated interest in this "technique", here's a little update:

the above CSS for the table (#tbl) will not work in Firefox, due to the display:block;
Again, Firefox (and maybe other true CSS browsers) behaves correctly and turns the table into a vanilla block element.
The table cells will "loose" their behaviour by the internal "display:table-cells" and do no longer stretch to the width of their (now "block"ed) parent table.
MSIE 5+ ignores this as he only supports "display:table-xxx" with true XML files.

However, MSIE6 will still render the table as expected even if "display:block" is ommited - I can't recall if this has been necessary for older versions.
thus for Firefox and anything else but MSIE you should remove the display:block from the #tbl selector:
#tbl {
 border:2px solid red;
 z-index:2;
 position:absolute;
 left:0%;
 top:0%;
 width:100%;
 /* for CSS2 browsers */
 min-height:100%;
}

I can't test this with MSIE 5.5, in case the table/cells won't stretch any more, add a "star hack" selector for MSIE below the above statement:
/* MSIE */
* html #tbl { display:block; }

Have fun,
CirTap

My first comment to this question was one of disbelief, so I figured I should finally add something of value to this thread. CirTap mentions the "star hack" so that only MSIE browsers read a certain line of CSS code. For an overview of all the different hacks for all the browsers, have a look here:

<a href="http://www.dithered.com/css_filters/css_only/">http://www.dithered.com/css_filters/css_only/</a>

Hopefully you'll find that as useful as I do.

sina
london