?
Solved

Fit background image to table size

Posted on 2003-02-23
29
Medium Priority
?
81,613 Views
Last Modified: 2013-12-25
Hi,

I am using a table with height and width as 100%. I wish to use a background image of size 500x375 pixels for this table.

How do i make the background image stretch to fit the table??? I do not want the image to repeat. It should only be a single image stretched as per resolution or size of the screen as the table does the same.(The table in turn has cells which has text content. )

Thanks
0
Comment
Question by:rsalunkhe
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 9
  • 7
  • 2
  • +9
29 Comments
 
LVL 4

Expert Comment

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

sina
london

0
 

Author Comment

by:rsalunkhe
ID: 8009150
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.
0
 
LVL 19

Expert Comment

by:webwoman
ID: 8010820
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.
0
Quiz: What Do These Organizations Have In Common?

Hint: Their teams ended up taking quizzes, too.

 
LVL 2

Expert Comment

by:Kovis
ID: 8014253
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
0
 
LVL 17

Expert Comment

by:RDAdams
ID: 8034707
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.
0
 

Author Comment

by:rsalunkhe
ID: 8035959
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
0
 
LVL 3

Expert Comment

by:Drift3r
ID: 8039570
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.
0
 
LVL 3

Expert Comment

by:Drift3r
ID: 8039608
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.
0
 

Author Comment

by:rsalunkhe
ID: 8042078
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.
0
 
LVL 2

Expert Comment

by:tconnolly
ID: 8045109
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
0
 
LVL 5

Expert Comment

by:cirtap
ID: 8077349
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.
0
 
LVL 5

Expert Comment

by:cirtap
ID: 8077363
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
0
 

Expert Comment

by:BHaines
ID: 8115202
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>
0
 
LVL 5

Expert Comment

by:cirtap
ID: 8123770
@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
0
 

Expert Comment

by:Face0
ID: 8145739
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>
0
 

Expert Comment

by:Face0
ID: 8145745
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)
0
 

Author Comment

by:rsalunkhe
ID: 8161450
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.
0
 
LVL 5

Expert Comment

by:cirtap
ID: 8180430
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
0
 

Author Comment

by:rsalunkhe
ID: 8192792
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
0
 
LVL 5

Accepted Solution

by:
cirtap earned 560 total points
ID: 8205118
you perfectly copied my error :-) sorry.

Replace the "browser sniffer" lines with

ie5 = (document.all && document.getElementById && !document.fireEvent)?true:false;
ie55= (document.all && document.fireEvent && !document.createComment)?true:false;
ie6 = (document.all && document.fireEvent && document.createComment)?true:false;
if (!window.opera && (ie5 || ie55 || ie6)) onload=fixBgImage;

when I posted the code, for some stupid reason I changed the repetitive document.all for ie55 and ie6 into (ie5 && ...) making all of them FALSE, so the onload handler did not run for any MSIE.


The error I noticed on your page pops up in MSIE5.5 SP2/Win
I just saw it starts in banner.html (line 67) and then continues on MainPage.html (line 43), the lines with function startSlideShow()

It's weired because I can't see any suspicious code here... only I don't see the slideshow due to this error <g>
Must be some local problem with .filters.blendTrans on this machine here then (DirectX problem maybe) - just forget it :-)

CirTap
0
 

Author Comment

by:rsalunkhe
ID: 8221914
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
0
 
LVL 5

Expert Comment

by:cirtap
ID: 8224727
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.
0
 

Expert Comment

by:TomMoore
ID: 8567360
I've created a new question with 125 point value based on this problem, please see
http://www.experts-exchange.com/Web/Graphics/Web_Images/Q_20623711.html
0
 

Author Comment

by:rsalunkhe
ID: 8861856
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 -

http://www.experts-exchange.com/Web/Graphics/Web_Images/Q_20669465.html

Thanks,
Ranjit
0
 

Author Comment

by:rsalunkhe
ID: 11163865

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.

0
 

Expert Comment

by:starops
ID: 11177887
Your all gods to me... I have been trying to figure out how to do this for ages, thank you so much.
0
 

Author Comment

by:rsalunkhe
ID: 11181693

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!!
0
 
LVL 5

Expert Comment

by:cirtap
ID: 14571550
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
0
 
LVL 4

Expert Comment

by:dearsina
ID: 14580001
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
0

Featured Post

Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

Question has a verified solution.

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

Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
Suggested Courses

771 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