«

Hi User,

I have an image, which I want to be the background of a table and / or table-cells.

e.g. such a table:
<table width="100%" cellspacing=4 cellpadding=7 border=2>
<tr><td>&nbsp;</td>
<th>test 1111111111</th><td>&nbsp;</td>
<th>test 2222222222</th><td>&nbsp;</td>
</tr>
</table>

To get the image into the background is easy: You just write background=url or similar to the td-tag or to the stylesheet.

The problem comes here:
I am not able to determine HOW the image is repeated in the single cell. "repeat: no repeat" is not done properly.

And what I am not able to do at all: Draw the image STRETCHED to the individual cell in its whole of 100%.

What I want to do, is a color effect like this:
http://tanz.or.at/

But I do not want to apply this 100%-stretch-effect to the background-image of the whole site (would be easy), but to the background of just a single cell of a table.

Can somebody give me a hint how to do this?


Thanks,
Nicole

Nicole wrote:

> I am not able to determine HOW the image is repeated in the single
> cell. "repeat: no repeat" is not done properly.

To not repeat a background image, use proper CSS:
background-repeat:no-repeat;
Read through this page for more options:
http://www.w3.org/TR/CSS21/propidx.html

> But I do not want to apply this 100%-stretch-effect to the
> background-image of the whole site (would be easy),

Really? How?
The background image on tanz.or.at is not stretched, it's repeated.
The same way you can repeat it in a table cell or any other element.

--
Els http://locusmeus.com/

Els wrote:

> Really? How?
> The background image on tanz.or.at is not stretched, it's repeated.
> The same way you can repeat it in a table cell or any other element.




Thank you for the link.
It is great, but it contains just the usual tags.

What I need may be an idea.


The image of the link (tanz.or.at) is repeated vertically, but stretched horicontally.

And if it would not be - this is exactly what I want:

I want an image which fades from left to right within a cell.

And this fading shall be visible independently of the inidivual size of the table. As a table can be "100%", I want the image "100%" and not repeated.

If there is no appropriate tag - does somebody know a trick or work-around?



Nicole

Nicole wrote:

> The image of the link (tanz.or.at) is repeated vertically, but stretched horicontally.

No, it's not.
It is a very wide image, it is not stretched.

> And if it would not be - this is exactly what I want:
>
> I want an image which fades from left to right within a cell.

You will have to make such an image in a program like PhotoShop or
GIMP.

> And this fading shall be visible independently of the inidivual size
> of the table. As a table can be "100%", I want the image "100%" and
> not repeated.

Can't be done in regular HTML/CSS as far as I know. 100% size of an
image, means the image's own original size, not the size of its parent
in the HTML structure.

> If there is no appropriate tag - does somebody know a trick or work-around?

Dunno - JavaScript maybe?

--
Els http://locusmeus.com/

Ben C wrote:
> On 2009-01-08, Els <> wrote:
>> Nicole wrote:

>>> And this fading shall be visible independently of the inidivual size
>>> of the table. As a table can be "100%", I want the image "100%" and
>>> not repeated.
>>
>> Can't be done in regular HTML/CSS as far as I know. 100% size of an
>> image, means the image's own original size, not the size of its parent
>> in the HTML structure.
>
> No, it does just mean 100% of the container in the usual way. You can
> set width or height of an image to 100% provided the width or height of
> the container doesn't depend on its contents.
>
> You can only do this with IMG elements-- background images can't be
> stretched or resized in CSS 2.1, only tiled and repeated.

Thanks for the correction, appears I was mixing stuff up.


--
Els http://locusmeus.com/

Nicole wrote:
> Els wrote:
>
>> Really? How? The background image on tanz.or.at is not stretched,
>> it's repeated. The same way you can repeat it in a table cell or
>> any other element.
>
> Thank you for the link. It is great, but it contains just the usual
> tags.

You seem to be stuck on the notion that this is an HTML problem. It
isn't. Use CSS and it's easy.

> The image of the link (tanz.or.at) is repeated vertically, but
> stretched horicontally.

No, it isn't.
http://tanz.or.at/images/backgrou.gif

> I want an image which fades from left to right within a cell.

So fire up your graphics editor and make an image wide enough for the
particular gradient you have in mind. It doesn't have to be very high.
1px will do, though 10 or 20px is better - less work for the browser.
You can use the above graphic as an example, though it doesn't have to
be that wide.

> And this fading shall be visible independently of the inidivual size
> of the table.

Piece of cake. Assign a solid background color corresponding to one end
of the gradient image. The solid color will pick up where the image lets
off.

> As a table can be "100%", I want the image "100%" and
> not repeated.

You can repeat the image in a way that it *looks* like 100%.

Say your image gradient goes from white on the left to black on the
right. The applicable CSS is:

background: #000 url(gradient.png) repeat-y;

The background will fill with black with the white end of the gradient
down the left side. If you want the midpoint of the gradient in the
center of the element, you can do that, too. Just make the image wider
and alter the positioning.

BTW, all this talk of table cell backgrounds makes me think you're using
last century's methods of web authoring. You aren't still using <font>
tags, too, are you? If so, you're way behind the times.

--
Berg

"Nicole" <Wagner> wrote in message news...

Hi User,

I have an image, which I want to be the background of a table and / or
table-cells.

e.g. such a table:
<table width="100%" cellspacing=4 cellpadding=7 border=2>
<tr><td>&nbsp;</td>
<th>test 1111111111</th><td>&nbsp;</td>
<th>test 2222222222</th><td>&nbsp;</td>
</tr>
</table>

To get the image into the background is easy: You just write background=url
or similar to the td-tag or to the stylesheet.

The problem comes here:
I am not able to determine HOW the image is repeated in the single cell.
"repeat: no repeat" is not done properly.

And what I am not able to do at all: Draw the image STRETCHED to the
individual cell in its whole of 100%.

What I want to do, is a color effect like this:
http://tanz.or.at/

But I do not want to apply this 100%-stretch-effect to the background-image
of the whole site (would be easy), but to the background of just a single
cell of a table.

Can somebody give me a hint how to do this?


Thanks,
Nicole


Hi Nicole,

Good news! it can be done

This is a little trick that I developed for my site...


<table cellspacing="0" cellpadding="0" width="100%" height="100%">
<td width="100%" height="100%">

<div style="position: relative; top: 0; left: 0; right: 0; bottom: 0; width:
100%; height: 100%;">
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; width:
100%; height: 100%;">PUT YOUR CELL CONTENT HERE</div>
<img src="../images/background.gif" width="100%" height="100%"
galleryimg="no">
</div>

</td>
</table>


Hope this helps

Andy

In article <06F9l.15471$2>,
"Andy" <> wrote:

> This is a little trick that I developed for my site...

How about a demo with a URL that you have tested and are satisfied with?

--
dorayme

"dorayme" <> wrote in message
news:doraymeRidThis-...
> In article <06F9l.15471$2>,
> "Andy" <> wrote:
>
>> This is a little trick that I developed for my site...
>
> How about a demo with a URL that you have tested and are satisfied with?
>
> --
> dorayme

OK, I'm visiting my Grandma today (Sat), but when I get back (approx 3pm)
I'll knock a demo up.

Andy

"Andy" <> wrote in message
news:aWZ9l.58563$2...
>
> "dorayme" <> wrote in message
> news:doraymeRidThis-...
>> In article <06F9l.15471$2>,
>> "Andy" <> wrote:
>>
>>> This is a little trick that I developed for my site...
>>
>> How about a demo with a URL that you have tested and are satisfied with?
>>
>> --
>> dorayme
>
> OK, I'm visiting my Grandma today (Sat), but when I get back (approx 3pm)
> I'll knock a demo up.
>
> Andy

Hi,

It's a bit of a rush job (because I've got a sausage casserole in the oven)
but here's a link to a demo for all the trolls/haters/doubters...

http://www.microbuild.com/test/table_bg.html

Andy