background-image

[marvin.avery]

Hi:

I am defining a table cell as follows:
<table>
<tr>
<td style="background-image:url(myimage)">
</td
</tr>
</table>

If the background image is too small, it repeats. Instead of repeating,
I would like it to *stretch* to fill the cell. Is there any way of
doing this? Similarily, if the cell is too small, is there anyway of
*compressing* the image so I still see the whole thing?

TIA
Marvin

 

[J.O. Aho]

Hi:

I am defining a table cell as follows:
<table>
<tr>
<td style="background-image:url(myimage)">
</td
</tr>
</table>

If the background image is too small, it repeats.

Add the following to the style to make it just appear once:
background-repeat: no-repeat;

Instead of repeating,
I would like it to *stretch* to fill the cell. Is there any way of
doing this? Similarily, if the cell is too small, is there anyway of
*compressing* the image so I still see the whole thing?

As far as I know, there is no option to fit it to a cell size, but you could
place it in the middle (at least it makes smaller ones to look a bit nice

background-position: center center;

Maybe better for you to adjust your images to one and the same size with some
graphics tool and adjust the cell sizes after the image size, you could also
just place out images with help of div-tags without the need to a table.

 

[K A Nuttall]

If the background image is too small, it repeats. Instead of
repeating, I would like it to *stretch* to fill the cell. Is there
any way of doing this? Similarily, if the cell is too small, is
there anyway of *compressing* the image so I still see the whole
thing?

I would try something like setting the TD to relative position (and
make the image a foreground element instead of a background), and then
putting the content in an absolutely positioned box (positioned at
T0/L0); the image and contents can then be sized at 100%.

I don't know if that would work (I haven't tried it), but it's a quick
suggestion that might lead to a solution.

 

[Neredbojias]

To further the education of mankind, "(e-mail address removed)"

Hi:

I am defining a table cell as follows:
<table>
<tr>
<td style="background-image:url(myimage)">
</td
</tr>
</table>

If the background image is too small, it repeats. Instead of repeating,
I would like it to *stretch* to fill the cell. Is there any way of
doing this? Similarily, if the cell is too small, is there anyway of
*compressing* the image so I still see the whole thing?

javascript

 

[Marvin]

I would try something like setting the TD to relative position (and
make the image a foreground element instead of a background), and then
putting the content in an absolutely positioned box (positioned at
T0/L0); the image and contents can then be sized at 100%.

I tried that. It seems to work under Firefox but under IE, weird things
happen -- like when the page first appears (and the image is too big),
the image displays compressed; but when the page is reloaded, the image
appears as its regular size and the table is screwed up.

Marvin

 

[Marvin]

To further the education of mankind, "(e-mail address removed)"


javascript

Can you be more specific?

Marvin

 

[Neredbojias]

Can you be more specific?

Sure. You use javascript to get the size of the document or part
thereof which you want, then use it further to resize the image to those
dimensions. In your case, you would get the table cell size and make
the image "fit" to it.

 

[Marvin]

Sure. You use javascript to get the size of the document or part
thereof which you want, then use it further to resize the image to those
dimensions. In your case, you would get the table cell size and make
the image "fit" to it.

OK, but the document/window is dynamic -- i.e. the user can resize it.
How do I get the size of the client area of the window? For all
browsers?

 

[Jonathan N. Little]

OK, but the document/window is dynamic -- i.e. the user can resize it.
How do I get the size of the client area of the window? For all
browsers?

Again, JavaScript. You have to trap the OnResize event. Man, I remember
doing this crap in the mid '90s. The result is always sub-par. A URL of
what you are really trying to accomplish would be helpful. Many times a
rethinking of the strategy can benefit the outcome, but that method does
not seem to be in fashion of late! ;-)

 

[Neredbojias]

OK, but the document/window is dynamic -- i.e. the user can resize it.
How do I get the size of the client area of the window? For all
browsers?

What Jonathon said is true; the solution isn't ideal. However, if you make
a really bare-bones example of what you want and provide a url to it, I'll
work-up a method of resizing the bg image to suit.

 

[Marvin]

I've captured OnResize before so I know "how" to do what I want.
Problem was I didn't know what (Javascript) method(s) would return the
current client (i.e. viewport) width. Anyway, I did find the methods I
need at http://www.quirksmode.org/viewport/intro.html

I'll try it out and see if it works.

Marvin

 

[Neredbojias]

I've captured OnResize before so I know "how" to do what I want.
Problem was I didn't know what (Javascript) method(s) would return the
current client (i.e. viewport) width. Anyway, I did find the methods I
need at http://www.quirksmode.org/viewport/intro.html

I'll try it out and see if it works.

It's really not too hard but sometimes coding must account for vaguaries of
different browsers. Anyway, best of luck and if you run into any troubles
and I can (-meaning am able to) help, I'd be glad to.

 

[Marvin]

It's really not too hard but sometimes coding must account for vaguaries of
different browsers. Anyway, best of luck and if you run into any troubles
and I can (-meaning am able to) help, I'd be glad to.

It worked! Turned out I had to change the size on the image, not the
table cell. Also, I had to perform this for the load event too in order
for it to work with IE.

Marvin

 

[Neredbojias]

It worked! Turned out I had to change the size on the image, not the
table cell. Also, I had to perform this for the load event too in
order for it to work with IE.

Congrats on solving things. I remember the early ?joys? of learning
javascript, but, actually, I like it now better than html. You can do so
much with it!