background in a table?

taval · Sep 12, 2000

I want to be able to display a background in a table. I got this off one of the posts on this forum. The text was from imotic:

--------------
well if you look at CSS backgrounds, then yes... anything can have a background in CSS. Although that's only on 4.x browsers... the code would be as follows:

<STYLE TYPE="text/css">
table {
background-image: url(your_bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}
</STYLE>

If you wanted to specify only one certain table or a number of particular tables you'd have to specify either an ID or a CLASS, according to normal CSS rules. Hope that helps

)
--------------------

The thing is I know nothing about cascading style sheets, do I paste the above code into my html file or create a .css file? How do I execute the code? What happens if I don't have a compatible browser. Does the code work both on Netscape and IE browsers?

Grateful for any assistance, Thanks.

Taha [sig][/sig]

fatbloke · Sep 12, 2000

The css code can be inserted within the <head></head> section of each HTML page.
This is fine if you're not doing too many - otherwise put all your css entries into one .css file and put a reference to this in each of the <head></head> sections.

Non-compatible browsers will work OK, i.e. they will ignore the css entries, however you will of course lose all the formatting they contain (so your pages will not look too special!).

Regarding the differences between IE and Netscape; yes there are some since both use a different DOM. For the problem you raise there should be no issues (as far as i can recall) but it is always something to be aware of. [sig][/sig]

RobSchultz · Sep 12, 2000

Taha,

Here is a sample css...

Code:

<style type=&quot;text/css&quot;>
TABLE.style1
 {
  background-image: url(your_bg1.jpg);
 }
TABLE.style2
 {
  background-image: url(your_bg2.jpg);
 }
TABLE.style3
 {
  background-image: url(your_bg3.jpg);
 }
</style>

In the example above I used TABLE.style1....
A. Case sensitivity doesn't exist table.Style1 would work as well.
B. when you follow a class after a tag (TABLE.style1) the style1 will only work on the TABLE. If you simply use .style1 then that style will work anywhere (<body class="style1"> for example)

If you want a separate style sheet (not within the head tags of each page you would remove the style tags and save the code with a .css extension. This style sheet would be called from within the html as so...

Code:

<html>
<head>
<link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;stylesheetname.css&quot;>
</head>
<body>
 html stuff here
</body>

The following is an example of what you could do with it (goes within the body tags)...

Code:

<!--example of non-css table...-->
<table background=&quot;bgname.gif&quot; rules=none frame=box border=1><tr><td>table stuff</td></tr></table>

<!--example of css table...-->
<table class=&quot;style1&quot;><tr><td>table stuff</td></tr></table>

As you can see the css is much easier to type and can be controlled from a single point rather than having to go into every page to change something.

CSS works in both NN and IE the same way. The difference comes in when calling the styles from within javascript. Also, some NN 4 browsers have a bug that causes them to lose CSS info when the window is resized.

A good article on CSS is at

http://webreview.com/97/05/30/feature/tutorial.html

and

http://webreview.com/97/06/27/coder/index.html

Good luck,
Rob
[sig][/sig]

taval · Sep 12, 2000

Thanks people,

I'll try doing the CSS now, thanks a lot,
Taha :} [sig][/sig]

mcvdmvs · Sep 18, 2000

Besides CSS, you can always use a background property in the <td> tag

<td background="../pictures/2-2.gif" width="60" height="60" valign="bottom" align="center">

It works for both IE5 and NS 4.74.
[sig][/sig]

taval · Sep 18, 2000

I've found that if put a background in a table that has rows in it, that in Netscape the background gets cut off at the edge of each row ending and starts again at the row beginning. This does not happen in IE, does anyone know a fix for this? [sig][/sig]

wood · Sep 19, 2000

Did you try setting the table properties:

cellspacing="0"
cellpadding="0"

Give this a try! [sig][/sig]

taval · Sep 19, 2000

I've tried using cellspacing="0" & cellpadding="0" but this really has no effect, the background repeats itself everytime it gets to a row end in Netscape.

Thanks anyway.

[sig][/sig]

mcvdmvs · Sep 26, 2000

Don't use it in the table tag but just in the row or the cell tag. That may help. When you use <td background="blabla">and theres nothing in the cell or there's an image in the cell put the td end tag on the same line. It helped me.
Otherwise check out my page, its all in table:

http://www.crosswinds.net/~mcvdmvs

Hope it helps ya.
Greetz MiQ [sig][/sig]

Guest_imported · Sep 26, 2000

mcvdmvs, that really is a cool page you got up and running. I'm working on a personal website and it looks pretty stylish right now but I have to add the finishing touches.
I tried putting the background in a <td> but now the picture only appears in that cell. I have a table that has text and other graphics in and I wanted a background that would have took up the whole space. It works in IE but not in NS as I said. Anyway I was wondering to do this in Netscape can I use layers and have one background layer and my page on top, I have not used layers before so could someone give me an example of how to do this.

Thanks.

mcvdmvs · Sep 28, 2000

Well i have my own little problem, i cant get my mouse overs to work with netscape.
I have used the same javascript as on other pages, but on this page it wont simply work.

http://www.crosswinds.net/~mcvdmvs

[sig]MiQ <a href=mailto:mcvdmvs@mcvdmvs.net>mcvdmvs@mcvdmvs.net</a> <a href=

http://www.mcvdmvs.net>mcvdmvs.net</a> Yeah,

well, erhm, ok... I'm busy trying to teach myself JavaScript, C++, Java and other webrelated stuff.[/sig]

mcvdmvs · Sep 28, 2000

Well i have my own little problem, i cant get my mouse overs to work with netscape.
I have used the same javascript as on other pages, but on this page it wont simply work.

http://www.crosswinds.net/~mcvdmvs

thans for the compliment taval, can i have a look at youre page as well? [sig]MiQ <a href=mailto:mcvdmvs@mcvdmvs.net>mcvdmvs@mcvdmvs.net</a> <a href=

http://www.mcvdmvs.net>mcvdmvs.net</a> Yeah,

well, erhm, ok... I'm busy trying to teach myself JavaScript, C++, Java and other webrelated stuff.[/sig]

mcvdmvs · Sep 28, 2000

Well i have my own little problem, i cant get my mouse overs to work with netscape.
I have used the same javascript as on other pages, but on this page it wont simply work.

http://www.crosswinds.net/~mcvdmvs

thans for the compliment taval, can i have a look at youre page as well?
U have an URL for me/us? [sig]MiQ <a href=mailto:mcvdmvs@mcvdmvs.net>mcvdmvs@mcvdmvs.net</a> <a href=

http://www.mcvdmvs.net>mcvdmvs.net</a> Yeah,

well, erhm, ok... I'm busy trying to teach myself JavaScript, C++, Java and other webrelated stuff.[/sig]

taval · Sep 28, 2000

Yeah that a bit weird it doesn't work in Netscape 4+, although I tested in NS 6 and it works fine. I'm sorry I can't help. If you are using layers then it won't work in NS I think. I'm in the process of nearly completing my web page, I've had to add lots of javascript that will write different html code when using NS 4+ since it doesn't support iframes, background in tables, layers ...etc I will put the url pretty soon on this forum, so people on can tell give me comments on how to improve it.

Taha [sig][/sig]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

background in a table?

taval

Programmer

fatbloke

Programmer

RobSchultz

Programmer

taval

Programmer

mcvdmvs

Technical User

taval

Programmer

wood

MIS

taval

Programmer

mcvdmvs

Technical User

Guest_imported

New member

mcvdmvs

Technical User

mcvdmvs

Technical User

mcvdmvs

Technical User

taval

Programmer

Similar threads

Part and Inventory Search

Sponsor