background image tricky

[Nicole]

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

 

[Els]

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.

 

[Nicole]

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

 

[Els]

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]

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.

 

[Bergamot]

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.

 

[Andy]

"Nicole" <Wagner> wrote in message
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

 

[dorayme]

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?

 

[Andy]

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

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

Andy

 

[Andy]

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

 

[Els]

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

Same effect in IE6, IE7, and FF3:
http://locusmeus.com/temp/stretch.jpg

Your method will only work as long as the content is never higher than
the set height of the table cell.

 

[Andy]

Same effect in IE6, IE7, and FF3:
http://locusmeus.com/temp/stretch.jpg

Your method will only work as long as the content is never higher than
the set height of the table cell.

Oh don't worry about that, I have a far more elegant version on my own site
that does way more stuff Consider this a "freebie" to help the OP out.

Andy

 

[Els]

Oh don't worry about that, I have a far more elegant version on my own site
that does way more stuff Consider this a "freebie" to help the OP out.

I'll believe it when I see it

 

[Andy]

I'll believe it when I see it

http://www.microbuild.com/microbuild/news/website/august 2008 page.html

Love & Kisses

Andy

 

[Bergamot]

Oh don't worry about that, I have a far more elegant version on my own site
that does way more stuff

Care to show us?

Consider this a "freebie" to help the OP out.

http://www.bergamotus.ws/screenshots/microbuild.png

I don't see how that will help the OP.

 

[Els]

http://www.microbuild.com/microbuild/news/website/august 2008 page.html

The only table cell there with a stretched image that I can find, has
no text in it, is a fixed height and width, so basically doesn't need
a stretched image. Am I missing something?
Oh, and just bump up the font a couple of clicks, see what that does.

As far as I can see, the OP wanted to stretch an image in a table
cell, because he does not know the size of the cell - that's why it
needs to stretch with the cell. Your example doesn't do that I think?

 

[dorayme]

As far as I can see, the OP wanted to stretch an image in a table
cell, because he does not know the size of the cell - that's why it
needs to stretch with the cell. Your example doesn't do that I think?

Be careful Els, he blew you kisses but has mentioned grandmas...
remember the wolf in Little Red Riding Hood? And has bared those teeth
with his "here's a link to a demo for all the trolls/haters/doubters...".

Andy originally showed some mark up which did not seem to be anywhere
near the "good news" he claimed. I am now wondering what the sausage
casserole he said he had in the oven was like. Recipe please, Andy.

 

[Bergamot]

http://www.microbuild.com/microbuild/news/website/august 2008 page.html

I see nothing but a blue background. Can't say it's very impressive. :-\

 

[rf]

http://www.microbuild.com/microbuild/news/website/august 2008 page.html

http://www.microbuild.com/

One (yes one) single increase in user font size and this site totally falls
apart.

 

[Andy]

Care to show us?


http://www.bergamotus.ws/screenshots/microbuild.png

I don't see how that will help the OP.

Listen Guys & Gals,

I'm aware that the rough code I submitted doesn't stand up to your exacting
standards, it was only a rushed example of how the OP's request could be
done. All I wanted to do was to show her that what others were telling her
was impossible to do was in fact accomplishable. I didn't want to do the
whole job for her as part of the learning process is to discover the
solutions for yourself so I just wanted to show her one possible road to a
solution... nothing more.

Clam down brothers and sisters, we're all the same species

Andy