background image tricky

N

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
 
E

Els

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

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),
Click to expand...

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.
 
N

Nicole

Els said:
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.
Click to expand...




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
 
E

Els

Nicole said:
The image of the link (tanz.or.at) is repeated vertically, but stretched horicontally.
Click to expand...

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.
Click to expand...

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.
Click to expand...

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?
Click to expand...

Dunno - JavaScript maybe?
 
E

Els

Ben said:
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.
Click to expand...

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

Bergamot

Nicole said:
Thank you for the link. It is great, but it contains just the usual
tags.
Click to expand...

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.
Click to expand...

No, it isn't.
http://tanz.or.at/images/backgrou.gif
I want an image which fades from left to right within a cell.
Click to expand...

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.
Click to expand...

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.
Click to expand...

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.
 
A

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
 
A

Andy

dorayme said:
How about a demo with a URL that you have tested and are satisfied with?
Click to expand...

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

Andy
 
E

Els

Andy said:
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.
Click to expand...

I'll believe it when I see it :)
 
E

Els

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

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?
 
D

dorayme

Els said:
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?
Click to expand...

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.
 
A

Andy

Bergamot said:
Care to show us?


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

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

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Angularjs newbie - second JSON datasource does not display 0
Can anyone please help? HTML - two tables applying different styles 4
Animate a background image 0
Change to background image. 5
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1
Javascript DOM 1
Sort by number of characters 1
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0

Members online

No members online now.
Total: 64 (members: 1, guests: 63)
Robots: 440

Forum statistics

Threads
473,982
Messages
2,570,185
Members
46,736
Latest member
AdolphBig6

Latest Threads

Top